/*
Theme Name: Battery Hero Mobile Theme
Theme URI: https://battery-hero-mobile.lovable.app
Author: Kites.Dev
Description: A high-performance, mobile-first WordPress theme for Battery Hero Mobile Car Battery Supply & Fitting Service.
Version: 1.2.0
Text Domain: batteryhero
*/

/* Custom Theme Design Tokens & Variables */
:root {
  --background: 216 50% 12%;
  --foreground: 0 0% 100%;
  --card: 216 50% 16%;
  --card-foreground: 0 0% 100%;
  --popover: 216 50% 16%;
  --popover-foreground: 0 0% 100%;
  --primary: 27 95% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 216 50% 20%;
  --secondary-foreground: 0 0% 100%;
  --muted: 216 40% 25%;
  --muted-foreground: 210 20% 70%;
  --accent: 27 95% 53%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 216 30% 25%;
  --input: 216 30% 25%;
  --ring: 27 95% 53%;
  --radius: 0.5rem;
  --hero-gradient: linear-gradient(135deg, hsl(216 50% 12%) 0%, hsl(216 60% 8%) 100%);
  --orange-gradient: linear-gradient(135deg, hsl(27 95% 53%) 0%, hsl(20 95% 45%) 100%);
  --glow-orange: 0 0 30px hsl(27 95% 53% / 0.3);
}

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

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Lucide icon helper */
svg.lucide {
  display: inline-block;
  vertical-align: middle;
}

/* Missing utility classes fallback */
.w-20 { width: 5rem !important; }
.h-20 { height: 5rem !important; }

/* Pulse glow animation matching original React app */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(249, 124, 21, 0.35);
  }
  50% {
    box-shadow: 0 0 40px rgba(249, 124, 21, 0.7);
  }
}

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

/* Success Card dedicated styling */
.batteryhero-form-success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.batteryhero-success-icon-badge {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  max-width: 72px;
  max-height: 72px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
  background-color: rgba(249, 124, 21, 0.15);
  border: 2px solid rgba(249, 124, 21, 0.5);
  color: hsl(var(--primary));
  box-shadow: 0 0 25px rgba(249, 124, 21, 0.35);
  flex-shrink: 0;
}

.batteryhero-success-icon-badge svg {
  width: 38px;
  height: 38px;
  stroke: hsl(var(--primary));
}

.batteryhero-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-family: 'Oswald', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.batteryhero-reset-btn:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  background-color: rgba(249, 124, 21, 0.05);
}

/* Motion / Animation styles replicating Framer Motion */
[data-motion="fade-up"] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-motion="fade-up-20"] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--motion-delay, 0) * 1s);
  will-change: opacity, transform;
}

[data-motion="scale-up"] {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
  will-change: opacity, transform;
}

[data-motion="fade-in"] {
  opacity: 0;
  transition: opacity 0.8s ease 0.8s;
  will-change: opacity;
}

[data-motion].motion-in-view {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Mobile drawer menu smooth transition */
#mobile-menu {
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

#mobile-menu.is-open {
  max-height: 400px;
  opacity: 1;
}