/* WarTemple — Official Brand Theme Styling (Terracotta, Flame Orange, Amber Gold & Dark Obsidian) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-main: #0a0d14;
  --bg-card: #0f1420;
  --bg-card-hover: #161d2c;
  --bg-surface: #192233;
  --border-subtle: rgba(245, 158, 11, 0.2);
  --border-active: rgba(249, 115, 22, 0.55);
  --brand-orange: #f97316;
  --brand-terracotta: #ea580c;
  --brand-amber: #f59e0b;
  --brand-gold: #fbbf24;
  --brand-flame: #ff6b00;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--bg-main);
  color: #f8fafc;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

.font-roman {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
}

/* Custom Scrollbar with Warm Amber & Terracotta glow */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #090c12;
}
::-webkit-scrollbar-thumb {
  background: #222b3d;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f97316;
}

/* Universal scrollbar suppressor for seamless tab strips & carousels */
.scrollbar-none,
.no-scrollbar,
[class*="scrollbar-none"],
[class*="no-scrollbar"] {
  -ms-overflow-style: none !important; /* IE and Edge */
  scrollbar-width: none !important;    /* Firefox */
}

.scrollbar-none::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar,
[class*="scrollbar-none"]::-webkit-scrollbar,
[class*="no-scrollbar"]::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* WarTemple Official Brand Gradient Text */
.gold-gradient-text,
.blue-gradient-text,
.brand-gradient-text {
  background: linear-gradient(135deg, #fef08a 0%, #fb923c 45%, #ea580c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-border-glow,
.blue-border-glow,
.brand-border-glow {
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.18);
}

.gold-border-glow:hover,
.blue-border-glow:hover,
.brand-border-glow:hover {
  border-color: rgba(249, 115, 22, 0.65);
  box-shadow: 0 0 22px rgba(249, 115, 22, 0.32);
}

.glass-panel {
  background: rgba(15, 20, 32, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.glass-modal {
  background: rgba(11, 14, 22, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(249, 115, 22, 0.35);
}

/* Card image gradient overlay */
.img-overlay-bottom {
  background: linear-gradient(to top, rgba(10, 13, 20, 0.98) 0%, rgba(10, 13, 20, 0.4) 50%, transparent 100%);
}

/* Mobile Safe Areas */
.pb-safe-nav {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

/* Leaflet Map overrides for dark mode with amber pins */
.leaflet-container {
  background: #0a0d14 !important;
  font-family: 'Inter', sans-serif !important;
}
.leaflet-tile {
  filter: brightness(0.7) invert(1) contrast(3) hue-rotate(185deg) saturate(0.3) brightness(0.75);
}
.leaflet-popup-content-wrapper {
  background: #101522 !important;
  color: #f8fafc !important;
  border: 1px solid #f97316 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.3) !important;
}
.leaflet-popup-tip {
  background: #101522 !important;
}

/* Modal animation */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-modal {
  animation: fadeInScale 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Pulse badge */
@keyframes subtlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.pulse-badge {
  animation: subtlePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Range Slider - WarTemple Brand Accent Styling */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #182233;
  border-radius: 9999px;
  outline: none;
  transition: all 0.2s ease;
  border: 1px solid #28364f;
}

.range-slider:hover {
  border-color: #f97316;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde047 25%, #ea580c 100%);
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.7), 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.95);
}

.range-slider::-webkit-slider-thumb:active {
  transform: scale(0.95);
  box-shadow: 0 0 22px rgba(249, 115, 22, 1);
}

.range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde047 25%, #ea580c 100%);
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.range-slider::-moz-range-thumb:hover {
  transform: scale(1.18);
}

/* Custom Checkbox Toggle Button */
.btn-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid #233149;
  background-color: #121927;
  color: #94a3b8;
}

.btn-filter-check:hover {
  border-color: #f97316;
  color: #f8fafc;
}

.btn-filter-check.active {
  background-color: rgba(249, 115, 22, 0.2);
  border-color: #f97316;
  color: #fdba74;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.25);
}

/* Docked Chat Widget Slide-up Animation */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-slide-up {
  animation: slideUpFade 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #1e2c44;
  border-radius: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #ea580c;
}