/* Custom CSS & Design Tokens for Appliance Repair */

:root {
  --color-primary-navy: #102A43;
  --color-service-blue: #1463FF;
  --color-service-blue-hover: #0B4ECC;
  --color-veteran-gold: #F4B740;
  --color-warm-white: #F8FAFC;
  --color-charcoal: #1F2937;
  --color-success-green: #168C4B;

  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--color-charcoal);
  background-color: #F8FAFC;
  overflow-x: hidden;
}

/* Unique Luxury Background System */
.hero-luxury-bg {
  background: linear-gradient(135deg, #0EA5E9 0%, #1463FF 45%, #0B132B 100%);
  position: relative;
}

.topbar-luxury-bg {
  background: linear-gradient(90deg, #0A1128 0%, #102A43 50%, #0A1128 100%);
}

.glass-card-premium {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 20px 50px rgba(11, 19, 43, 0.09);
}

.text-gradient-gold-cyan {
  background: linear-gradient(135deg, #F4B740 0%, #FFFFFF 40%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
}

/* Custom Utilities & Accents */
.bg-navy {
  background-color: var(--color-primary-navy);
}

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

.bg-service-blue {
  background-color: var(--color-service-blue);
}

.text-service-blue {
  color: var(--color-service-blue);
}

.bg-veteran-gold {
  background-color: var(--color-veteran-gold);
}

.text-veteran-gold {
  color: var(--color-veteran-gold);
}

.bg-warm-white {
  background-color: var(--color-warm-white);
}

.text-success-green {
  color: var(--color-success-green);
}

.btn-primary {
  background: linear-gradient(135deg, #F97316 0%, #F59E0B 100%);
  color: #ffffff;
  font-weight: 700;
  padding: 0.875rem 1.75rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #EA580C 0%, #D97706 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(249, 115, 22, 0.45);
}

.btn-secondary {
  background-color: var(--color-primary-navy);
  color: #ffffff;
  font-weight: 600;
  padding: 0.875rem 1.75rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-secondary:hover {
  background-color: #1D3D5D;
  transform: translateY(-1px);
}

.btn-gold,
.btn-orange {
  background: linear-gradient(135deg, #F97316 0%, #F59E0B 100%);
  color: #ffffff;
  font-weight: 700;
  padding: 0.875rem 1.75rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35);
}

.btn-gold:hover,
.btn-orange:hover {
  background: linear-gradient(135deg, #EA580C 0%, #D97706 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(249, 115, 22, 0.45);
}

.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(16, 42, 67, 0.12);
  border-color: var(--color-service-blue);
}

/* Accordion Smooth Transitions */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.faq-item.active .faq-content {
  max-height: 1000px;
  transition: max-height 0.3s ease-in-out;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Sticky Bottom Action Bar Margin Cushion for Mobile */
@media (max-width: 768px) {
  body {
    padding-bottom: 72px;
  }
}

/* Pulse keyframes for availability status dot */
@keyframes status-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.status-dot {
  animation: status-pulse 2s infinite ease-in-out;
}