/* Instagram-themed overrides – load after main stylesheet */

:root {
  --ig-blue: #405de6;
  --ig-purple-blue: #5851db;
  --ig-purple: #833ab4;
  --ig-purple-red: #c13584;
  --ig-rose: #e1306c;
  --ig-red: #fd1d1d;
  --ig-orange: #f77737;
  --ig-yellow: #fecf45;
  --ig-gradient: linear-gradient(
    45deg,
    #405de6,
    #5851db,
    #833ab4,
    #c13584,
    #e1306c,
    #fd1d1d,
    #f56040,
    #f77737,
    #fecf45,
    #ffdc80
  );
  --ig-gradient-short: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fecf45 100%);
  --ig-gradient-btn: linear-gradient(135deg, #833ab4 0%, #c13584 30%, #e1306c 60%, #fd1d1d 100%);
  --ig-gradient-btn-hover: linear-gradient(135deg, #6b2d8a 0%, #a02d6e 30%, #c92a5e 60%, #d61919 100%);
}

/* Base: clean Instagram-style background */
html,
body {
  background-color: #fafafa !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Primary buttons: Instagram gradient */
.bg-fb-blue,
.bg-fb-blue-500,
.bg-blue-500 {
  background: var(--ig-gradient-btn) !important;
  border: none !important;
}

.bg-blue-600,
.hover\:bg-fb-blue-600:hover,
.hover\:bg-blue-600:hover {
  background: var(--ig-gradient-btn-hover) !important;
}

/* Header gradient area (from-fb-blue to-fb-blue-600) */
.from-fb-blue {
  --tw-gradient-from: #833ab4 !important;
  --tw-gradient-to: #e1306c !important;
}

.to-fb-blue-600 {
  --tw-gradient-to: #e1306c !important;
}

.bg-gradient-to-br.from-fb-blue {
  background: linear-gradient(135deg, #833ab4 0%, #c13584 40%, #e1306c 70%, #fd1d1d 100%) !important;
}

/* Info / alert boxes: light Instagram tint */
.bg-fb-blue-50 {
  background-color: rgba(225, 48, 108, 0.06) !important;
}

.bg-fb-blue-100 {
  background-color: rgba(225, 48, 108, 0.10) !important;
}

.bg-blue-50 {
  background-color: rgba(131, 58, 180, 0.06) !important;
}

.bg-blue-100 {
  background-color: rgba(131, 58, 180, 0.10) !important;
}

/* Borders */
.border-fb-blue {
  border-color: var(--ig-rose) !important;
}

.border-fb-blue-200 {
  border-color: rgba(225, 48, 108, 0.25) !important;
}

.border-fb-blue-300 {
  border-color: rgba(225, 48, 108, 0.40) !important;
}

.border-blue-200 {
  border-color: rgba(131, 58, 180, 0.25) !important;
}

/* Text */
.text-fb-blue,
.text-fb-blue-600,
a.text-fb-blue {
  color: var(--ig-rose) !important;
}

.text-fb-blue-700 {
  color: #c13584 !important;
}

.text-fb-blue-800,
.text-fb-blue-900 {
  color: #833ab4 !important;
}

.text-blue-500,
.text-blue-600 {
  color: var(--ig-rose) !important;
}

.hover\:text-fb-blue-600:hover {
  color: #833ab4 !important;
}

/* Focus rings: Instagram rose */
.focus\:ring-blue-500:focus,
.focus\:ring-fb-blue:focus {
  --tw-ring-color: rgba(225, 48, 108, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(225, 48, 108, 0.35) !important;
}

/* Progress bar fill: active step = Instagram gradient */
.h-2.rounded-full.bg-fb-blue,
.bg-fb-blue.h-2 {
  background: var(--ig-gradient-short) !important;
}

/* Step indicators: active = Instagram tint */
.bg-fb-blue-100.text-fb-blue-700.border-2.border-fb-blue {
  background: rgba(225, 48, 108, 0.12) !important;
  border-color: var(--ig-rose) !important;
  color: #833ab4 !important;
}

/* Links and interactive text */
.text-sm.text-fb-blue.font-medium {
  color: var(--ig-rose) !important;
}

.text-sm.text-fb-blue.font-medium:hover {
  color: #833ab4 !important;
}

/* Bottom nav active tab */
.text-gray-900 .w-6.h-6 {
  color: inherit;
}

/* Green stays for completed/success states */
.hover\:bg-green-600:hover,
.hover\:bg-green-700:hover {
  background-color: #16a34a !important;
}

/* Cards: slightly softer shadows */
.shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Gradient text for balance display */
.from-green-600 {
  --tw-gradient-from: #22c55e !important;
}