/* ============================================================
   KICKSTART BRAND OVERRIDES
   Overrides Bootstrap + existing component styles that can't
   be handled by CSS variable remapping alone.
   Business Model Intelligence — iterate.kickstartglobal.com
   ============================================================ */

/* === TYPOGRAPHY === */
body,
p, span, small, label, input, select, textarea, button, td, th, li, a {
  font-family: var(--ks-font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.magic-title,
.hero-title,
footer .ks-footer-brand {
  font-family: var(--ks-font-display) !important;
}

/* === NAVIGATION === */
.navbar {
  background-color: var(--ks-dark) !important;
  border-bottom: 1px solid var(--ks-border);
}

/* === BUTTONS === */
.btn-innvenno {
  background-color: var(--ks-red) !important;
  color: var(--ks-text-inverse) !important;
  border: none;
  font-weight: 600;
}

.btn-innvenno:hover,
.btn-innvenno:focus {
  background-color: var(--ks-red-hover) !important;
  color: var(--ks-text-inverse) !important;
  box-shadow: 0 10px 20px rgba(232, 0, 28, 0.25) !important;
  transform: translateY(-2px);
}

.btn-outline-innvenno {
  color: var(--ks-red) !important;
  border-color: var(--ks-red) !important;
  background: transparent;
  font-weight: 600;
}

.btn-outline-innvenno:hover,
.btn-outline-innvenno:focus {
  background-color: var(--ks-red) !important;
  color: var(--ks-text-inverse) !important;
}

/* === FOCUS RINGS === */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--ks-red) !important;
  outline-offset: 2px;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--ks-red) !important;
  box-shadow: 0 0 0 0.2rem rgba(232, 0, 28, 0.25) !important;
}

/* === GLOW EFFECTS (convert green rgba → red rgba) === */
.btn-innvenno:hover {
  box-shadow: 0 10px 20px rgba(232, 0, 28, 0.25) !important;
}

.btn-outline-innvenno:hover {
  box-shadow: 0 10px 20px rgba(232, 0, 28, 0.2) !important;
}

.magic-title {
  text-shadow: 0 0 10px rgba(232, 0, 28, 0.6) !important;
}

.progress-bar-magic {
  background: linear-gradient(90deg, var(--ks-red), #8B0011) !important;
  box-shadow: 0 0 10px rgba(232, 0, 28, 0.6) !important;
}

.magic-icon {
  color: var(--ks-red) !important;
}

.sparkle {
  background-color: var(--ks-red) !important;
}

/* Newsletter border */
#newsletter-container {
  border: 2px solid rgba(232, 0, 28, 0.2) !important;
}

#newsletter-container::before {
  background: linear-gradient(90deg, var(--ks-red), #8B0011) !important;
}

/* === SOCIAL ICONS === */
.social-icons a:hover {
  background-color: var(--ks-red) !important;
  color: var(--ks-text-inverse) !important;
}

/* === STEP INDICATOR === */
.step-indicator li.active:before,
.step-indicator li.completed:before {
  background-color: var(--ks-red) !important;
}

.step-indicator .active .step-icon,
.step-indicator .completed .step-icon {
  background-color: var(--ks-red) !important;
}

/* === NAV ACTIVE STATES === */
.nav-link.active {
  color: var(--ks-red) !important;
  border-bottom: 2px solid var(--ks-red) !important;
}

.nav-link:hover {
  color: rgba(232, 0, 28, 0.8) !important;
}

/* === BREADCRUMB === */
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ks-red) !important;
}

.breadcrumb-item a {
  color: var(--ks-red) !important;
}

.breadcrumb-item a:hover {
  color: var(--ks-red-hover) !important;
}

/* === TABS === */
.innvenno-tab.active {
  color: var(--ks-red) !important;
}

.innvenno-tab::after {
  background-color: var(--ks-red) !important;
}

/* === CARDS === */
.card {
  background-color: var(--ks-surface);
  border: 1px solid var(--ks-border);
}

/* === FOOTER === */
footer.footer {
  background-color: var(--ks-dark) !important;
  border-top: 1px solid var(--ks-border);
}

/* === KICKSTART NAV WORDMARK === */
.ks-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--ks-font-display) !important;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ks-nav-logo .ks-arrow {
  color: var(--ks-red);
  font-size: 1.1em;
  line-height: 1;
}

.ks-nav-logo .ks-wordmark {
  color: var(--ks-red) !important;
  font-size: 1.15rem;
}

.ks-nav-separator {
  color: var(--ks-border-strong);
  margin: 0 6px;
  font-size: 1.1rem;
  line-height: 1;
}

.ks-nav-appname {
  color: var(--ks-text-secondary) !important;
  font-family: var(--ks-font-body) !important;
  font-weight: 500;
  font-size: 0.9rem;
}

/* === KICKSTART FOOTER === */
.ks-footer-brand {
  color: var(--ks-text-primary);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.ks-footer-tagline {
  color: var(--ks-text-secondary);
  font-size: 0.85rem;
  margin-bottom: 0;
}

.ks-footer-chip-text {
  color: var(--ks-red) !important;
  font-family: var(--ks-font-display) !important;
  font-weight: 700;
  font-size: 0.85rem;
}

.ks-footer-link {
  color: var(--ks-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.ks-footer-link:hover {
  color: var(--ks-red) !important;
}

/* ============================================================
   BOOTSTRAP SUCCESS → KS RED REMAPPING
   Overrides every Bootstrap "success" utility class so no
   green accent renders anywhere in the UI.
   ============================================================ */

/* bg-success backgrounds */
.bg-success,
.progress-bar.bg-success,
.stats-card.bg-success {
  background-color: var(--ks-red) !important;
  color: #fff !important;
}

/* text-success text */
.text-success {
  color: var(--ks-red) !important;
}

/* Buttons */
.btn-success,
.btn-success.disabled,
.btn-success:disabled {
  background-color: var(--ks-red) !important;
  border-color: var(--ks-red) !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  background-color: var(--ks-red-hover) !important;
  border-color: var(--ks-red-hover) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(232, 0, 28, 0.25) !important;
}

.btn-outline-success {
  color: var(--ks-red) !important;
  border-color: var(--ks-red) !important;
  background: transparent !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
  background-color: var(--ks-red) !important;
  border-color: var(--ks-red) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(232, 0, 28, 0.2) !important;
}

/* Badges */
.badge.bg-success,
span.badge.bg-success,
.badge[class*="bg-success"] {
  background-color: var(--ks-red) !important;
  color: #fff !important;
}

/* Borders */
.border-success {
  border-color: var(--ks-red) !important;
}

/* Alert */
.alert-success {
  background-color: rgba(232, 0, 28, 0.1) !important;
  border-color: rgba(232, 0, 28, 0.3) !important;
  color: var(--ks-red) !important;
}

/* Spinner */
.text-success.spinner-border,
.spinner-border.text-success {
  color: var(--ks-red) !important;
}

/* Progress bars with animated success stripe */
.progress-bar-animated.bg-success {
  background-color: var(--ks-red) !important;
}

/* Dynamic class replacements via JS (chat.html applyBtn) */
.btn-success.apply-to-model-btn {
  background-color: var(--ks-red) !important;
  border-color: var(--ks-red) !important;
}