/* ========================================
   Meridian Warehouse Solutions — Custom Styles
   ======================================== */

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #1B2A4A;
  font-weight: 700;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #D97706, #B45309);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: #1B2A4A;
  border: 2px solid #E2E8F0;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  border-color: #0EA5E9;
  color: #0EA5E9;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
}

.btn-amber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #1B2A4A;
  font-weight: 700;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-amber:hover {
  background: linear-gradient(135deg, #D97706, #B45309);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
  transform: translateY(-1px);
}

/* ---------- Toast / Notifications ---------- */
.toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  min-width: 260px;
  max-width: 360px;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-success {
  background: #ecfdf3;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.toast-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.toast-hide {
  opacity: 0;
  transform: translateY(-6px);
}

/* ---------- Navigation ---------- */
#navbar.scrolled {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ---------- FAQ Accordion ---------- */
.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-content {
  display: block;
  max-height: 500px;
}

/* ---------- Fade-in Animations ---------- */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll-triggered animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Market bar chart animation ---------- */
.market-bar {
  width: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.market-bar.animate {
  width: var(--target-width);
}

/* ---------- Flowchart node hover ---------- */
.flowchart-node {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.flowchart-node:hover {
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
  border-color: #0EA5E9;
}

/* ---------- Form focus states ---------- */
input:focus,
textarea:focus {
  border-color: #0EA5E9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* ---------- Selection color ---------- */
::selection {
  background: rgba(14, 165, 233, 0.2);
  color: #1B2A4A;
}

/* ---------- Scrollbar (subtle) ---------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F8FAFC;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}