/* =========================================================================
   AuditDesk — Get Demo Page Layout (Minimal Custom Brand Styles)
   ========================================================================= */

.demo-master-container {
  background: var(--bg-warm);
}

.text-accent {
  color: var(--accent) !important;
}

.bg-accent-tint {
  background-color: var(--accent-tint) !important;
}

/* Hover lift transition utility */
.hover-lift {
  transition: all 0.3s var(--ease);
}
.hover-lift:hover {
  transform: translateY(-5px);
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Stepper Timeline horizontal line overlay for desktop screen sizes */
.timeline-row {
  position: relative;
}

.timeline-step-col {
  position: relative;
  z-index: 2;
}

.timeline-node {
  width: 72px;
  height: 72px;
  transition: all 0.3s var(--ease);
  z-index: 2;
  position: relative;
  background-color: #ffffff !important;
}
.timeline-step-col:hover .timeline-node {
  border-color: var(--accent) !important;
  background-color: var(--accent-tint) !important;
  transform: scale(1.08);
}

/* Next Step row hover slide */
.next-step-row {
  transition: all 0.3s var(--ease);
}
.next-step-row:hover {
  border-color: var(--accent) !important;
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

/* Form Input Focus Overrides for Brand Colors */
.demo-form-card .form-control:focus,
.demo-form-card .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}

/* Brand Button Override */
.btn-demo-submit {
  background: #EE3838;
  color: #ffffff;
  border: 1px solid #EE3838;
  transition: all 0.25s var(--ease);
  box-shadow: 0 6px 18px rgba(238, 56, 56, 0.25);
}
.btn-demo-submit:hover {
  background: #D32F2F;
  border-color: #D32F2F;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(238, 56, 56, 0.35);
  color: #ffffff;
}

/* FAQ accordion chevrons animation */
.faq-header-btn {
  box-shadow: none !important;
}
.faq-header-btn:not(.collapsed) {
  color: var(--accent-dark) !important;
  background: rgba(14, 124, 102, 0.04) !important;
}
.faq-header-btn .faq-arrow {
  transition: transform 0.25s var(--ease);
  color: var(--ink-soft);
}
.faq-header-btn:not(.collapsed) .faq-arrow {
  transform: rotate(180deg);
  color: var(--accent-dark);
}