/* Global app styles (Tailwind removed — use Bootstrap + locial-marketing-theme.css) */

/* Partner hero: white text in dark mode */
[data-bs-theme="dark"] .partner-hero-section h1 {
  color: #fff !important;
}
[data-bs-theme="dark"] .partner-hero-section h1 .text-primary {
  color: var(--bs-primary) !important;
}
[data-bs-theme="dark"] .partner-hero-section .partner-hero-desc {
  color: rgba(255, 255, 255, 0.85) !important;
}
[data-bs-theme="dark"] .partner-hero-section .partner-hero-login {
  color: rgba(255, 255, 255, 0.8) !important;
}
[data-bs-theme="dark"] .partner-hero-section .partner-hero-benefits {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Auth / route guard loading (see RouteLoadingFallback.tsx) — match global page bg */
.route-loading-fallback {
  min-height: 100vh;
  background-color: var(--billiie-page-bg, #00242e);
  background-image:
    radial-gradient(1200px 560px at 28% 0%, rgba(59, 214, 43, 0.12), transparent 58%),
    radial-gradient(820px 480px at 92% 12%, rgba(59, 214, 43, 0.08), transparent 52%),
    linear-gradient(180deg, var(--billiie-page-bg-deep, #001319) 0%, var(--billiie-page-bg, #00242e) 100%);
}

/* HTML: <div class="loader"></div> — clip-path animation */
.route-loading-fallback .loader,
.partner-dashboard-page .loader {
  width: 40px;
  height: 60px;
  position: relative;
}

.route-loading-fallback .loader::before,
.route-loading-fallback .loader::after,
.partner-dashboard-page .loader::before,
.partner-dashboard-page .loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--billiie-brand-cta, #3bd62b);
  clip-path: polygon(0 0, 100% 0, 100% 67%, 50% 67%, 50% 34%, 0 34%);
  animation: route-loader-sp7 2s infinite;
}

.route-loading-fallback .loader::after,
.partner-dashboard-page .loader::after {
  --s: -1;
}

@keyframes route-loader-sp7 {
  0%,
  10% {
    transform: scale(var(--s, 1)) translate(0, 0) rotate(0deg);
  }
  33% {
    transform: scale(var(--s, 1)) translate(0, -20px) rotate(0deg);
  }
  66% {
    transform: scale(var(--s, 1)) translate(10px, -20px) rotate(-90deg);
  }
  90%,
  100% {
    transform: scale(var(--s, 1)) translate(10px, -10px) rotate(-90deg);
  }
}

html {
  font-size: 16px; /* Base font size for rem calculations */
  min-height: 100%;
  background-color: var(--billiie-page-bg-deep, #001319);
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem; /* Use rem to respect html font-size */
  min-height: 100%;
  margin: 0;
  color: var(--bs-body-color, #606261); /* Use Bootstrap variable if available, fallback to default */
  background-color: var(--billiie-page-bg, #00242e);
  background-image:
    radial-gradient(1200px 560px at 28% 0%, rgba(59, 214, 43, 0.1), transparent 58%),
    linear-gradient(180deg, var(--billiie-page-bg-deep, #001319) 0%, var(--billiie-page-bg, #00242e) 100%);
}

:root {
    /* Primary Brand Colors */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;

    /* Secondary Brand Colors */
    --color-secondary-50: #f0fdfa;
    --color-secondary-100: #ccfbf1;
    --color-secondary-200: #99f6e4;
    --color-secondary-300: #5eead4;
    --color-secondary-400: #2dd4bf;
    --color-secondary-500: #14b8a6;
    --color-secondary-600: #0d9488;
    --color-secondary-700: #0f766e;
    --color-secondary-800: #115e59;
    --color-secondary-900: #134e4a;

    /* Accent Colors */
    --color-accent-blue: #3b82f6;
    --color-accent-teal: #14b8a6;
    --color-accent-emerald: #10b981;
    --color-accent-amber: #f59e0b;
    --color-accent-orange: #f97316;
    --color-accent-red: #ef4444;
    --color-accent-green: #22c55e;
    --color-accent-yellow: #eab308;

    /* Billiie / Locial primary CTA green — source for loaders, links to locial-marketing-theme */
    --billiie-brand-cta: #3bd62b;

    /* Default page backdrop (html/body + loading) — same base as --locial-bg in locial-marketing-theme */
    --billiie-page-bg: #00242e;
    --billiie-page-bg-deep: #001319;

    /* Neutral Colors */
    --color-neutral-50: #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;
    --color-neutral-900: #0f172a;

    /* Gradient Combinations */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-accent-blue) 0%, var(--color-accent-teal) 100%);
    
    /* Background Gradients */
    --bg-gradient-primary: linear-gradient(135deg, var(--color-neutral-50) 0%, var(--color-neutral-100) 100%);
    --bg-gradient-card: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

/* Custom utility classes for consistent color usage */
.bg-brand-primary {
  background: var(--gradient-primary);
}

.bg-brand-secondary {
  background: var(--gradient-secondary);
}

.bg-brand-accent {
  background: var(--gradient-accent);
}

.text-brand-primary {
  color: var(--color-primary-600);
}

.text-brand-secondary {
  color: var(--color-secondary-600);
}

.border-brand-primary {
  border-color: var(--color-primary-200);
}

.border-brand-secondary {
  border-color: var(--color-secondary-200);
}

/* Slide transition animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.8s ease-out;
}

.animate-slideInRight {
  animation: slideInFromRight 0.8s ease-out;
}

.animate-slideInLeft {
  animation: slideInFromLeft 0.8s ease-out;
}

.animate-zoomIn {
  animation: zoomIn 0.8s ease-out;
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-slideInFromBottom {
  animation: slideInFromBottom 1s ease-out;
}

.animate-fadeInScale {
  animation: fadeInScale 0.6s ease-out;
}

@keyframes rain {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

@keyframes snow {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes lightning {
  0%, 90%, 100% {
    opacity: 0;
  }
  5%, 15% {
    opacity: 1;
  }
}

.animate-rain {
  animation: rain 1s linear infinite;
}

.animate-snow {
  animation: snow 3s linear infinite;
}

.animate-lightning {
  animation: lightning 2s ease-in-out infinite;
}

@keyframes fog {
  0%, 100% {
    opacity: 0.3;
    transform: translateX(-10px);
  }
  50% {
    opacity: 0.6;
    transform: translateX(10px);
  }
}

@keyframes dust {
  0% {
    transform: translateY(-100vh) translateX(-20px);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) translateX(20px);
    opacity: 0;
  }
}

.animate-fog {
  animation: fog 4s ease-in-out infinite;
}

.animate-dust {
  animation: dust 2s linear infinite;
}

/* Hide scrollbar for social media style scrolling */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* Bootstrap collapse: ensure .collapse is not table `visibility: collapse` */
.collapse:not(.show) {
  visibility: visible !important;
  display: none;
}

.collapse.show {
  visibility: visible !important;
  display: block;
}

/* Ensure Bootstrap's navbar collapse works correctly */
.navbar-collapse.collapse {
  visibility: visible !important;
}

@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    visibility: visible !important;
  }
}

/* Prevent iOS zoom on input/select/textarea focus (font-size < 16px triggers zoom and horizontal scroll) */
@media screen and (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}