/* Lightweight UI/UX layer on top of template CSS */

:root {
  --mc-primary: #4361ee;
  --mc-primary-2: #3a0ca3;
  --mc-success: #16a34a;
  --mc-danger: #dc2626;
  --mc-bg: #0b1220;
  --mc-card: rgba(255, 255, 255, 0.92);
  --mc-border: rgba(15, 23, 42, 0.10);
}

body {
  scroll-behavior: smooth;
}

.mc-page {
  min-height: 60vh;
}

.mc-card {
  border-radius: 18px !important;
  border: 1px solid var(--mc-border) !important;
  box-shadow: 0 14px 35px rgba(2, 6, 23, 0.10) !important;
}

.mc-card-header {
  border-radius: 18px 18px 0 0 !important;
}

.mc-btn-primary {
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2)) !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 24px rgba(67, 97, 238, 0.25);
}

.mc-btn-primary:hover {
  filter: brightness(1.02);
}

/* Align warning buttons to site primary color (match navbar CTA) */
.btn-warning,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.show {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(6, 163, 218, 0.25);
}

.btn-warning:hover,
.btn-warning:focus-visible {
  filter: brightness(0.95);
  color: #fff !important;
}

.btn-warning:disabled,
.btn-warning.disabled {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  opacity: 0.6;
}

.mc-btn-soft {
  border-radius: 14px !important;
}

.mc-toast-wrap {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  width: min(920px, calc(100% - 24px));
  pointer-events: none;
}

.mc-toast {
  pointer-events: auto;
  border-radius: 14px;
  border: 1px solid rgba(2, 6, 23, 0.08);
  box-shadow: 0 18px 45px rgba(2, 6, 23, 0.18);
}

.mc-skeleton {
  background: linear-gradient(90deg, rgba(2,6,23,0.06), rgba(2,6,23,0.10), rgba(2,6,23,0.06));
  background-size: 200% 100%;
  animation: mc-shimmer 1.2s infinite;
  border-radius: 10px;
}

@keyframes mc-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}