/* 
  LAUNDRA Premium Luxury Laundry Services CSS
  Aesthetic Tokens: Luxury Black & Gold Theme Overrides
*/

/* Custom Font Definitions & Smooth Scroll */
html {
  scroll-behavior: smooth;
  font-family: "Archivo", sans-serif;
  background-color: #0D0D0D;
}

body {
  font-family: "Archivo", sans-serif;
  background-color: #0D0D0D !important;
  color: #E5E5E5 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Archivo", sans-serif;
  letter-spacing: -0.01em;
  color: #FFFFFF !important;
}

/* Premium Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #0D0D0D;
}

::-webkit-scrollbar-thumb {
  background: #1B1B1B;
  border-radius: 9999px;
  border: 3px solid #0D0D0D;
}

::-webkit-scrollbar-thumb:hover {
  background: #C8A96B;
}

/* Custom Glassmorphism Navbar Override */
.glass-nav {
  background: rgba(13, 13, 13, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(200, 169, 107, 0.15) !important;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6) !important;
}

/* Premium Glassmorphic Cards with Gold Borders and Glow Accents */
.glass-card,
.bg-slate-50.border,
.bg-white.rounded-2xl.border,
.bg-white.rounded-3xl.border,
.calculator-card,
.accordion-item {
  background: rgba(18, 18, 18, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(200, 169, 107, 0.15) !important;
  box-shadow: 0 10px 40px -15px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.glass-card:hover,
.bg-slate-50.border:hover,
.bg-white.rounded-2xl.border:hover,
.bg-white.rounded-3xl.border:hover,
.accordion-item:hover {
  border-color: rgba(200, 169, 107, 0.4) !important;
  box-shadow: 0 20px 50px -10px rgba(200, 169, 107, 0.1) !important;
  transform: translateY(-4px) !important;
}

/* Keyframe Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulse-subtle {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.95;
    transform: scale(1.01);
  }
}

@keyframes sparkle {

  0%,
  100% {
    transform: scale(0.3) rotate(0deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.1) rotate(180deg);
    opacity: 1;
  }
}

/* Helper Animation Classes */
.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

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

/* Premium Sparkle Decorator */
.sparkle-icon {
  position: relative;
}

.sparkle-icon::before {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  animation: sparkle 3s ease-in-out infinite;
  font-size: 1.25rem;
}

/* Multi-step Form Wizard Transitions */
.form-step {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-step.hidden {
  display: none;
  opacity: 0;
  transform: translateX(20px);
}

/* Custom Interactive Timeline Styles */
.timeline-item {
  position: relative;
}

.timeline-item::after {
  content: '';
  position: absolute;
  left: -19px;
  top: 40px;
  bottom: -40px;
  width: 2px;
  background: rgba(200, 169, 107, 0.2) !important;
}

.timeline-item:last-child::after {
  display: none;
}

.before\:bg-slate-200::before {
  background-color: rgba(200, 169, 107, 0.2) !important;
}

/* Global Background Override Utilities */
.bg-slate-50 {
  background-color: #0D0D0D !important;
}

.bg-white {
  background-color: #121212 !important;
}

.bg-slate-100 {
  background-color: #1B1B1B !important;
}

.bg-slate-200 {
  background-color: #262626 !important;
}

.bg-navy-900,
footer.bg-navy-900 {
  background-color: #0D0D0D !important;
}

.border-slate-100 {
  border-color: rgba(200, 169, 107, 0.1) !important;
}

.border-slate-200 {
  border-color: rgba(200, 169, 107, 0.15) !important;
}

.border-slate-200\/60 {
  border-color: rgba(200, 169, 107, 0.12) !important;
}

.border-slate-200\/80 {
  border-color: rgba(200, 169, 107, 0.2) !important;
}

.border-slate-200\/50 {
  border-color: rgba(200, 169, 107, 0.1) !important;
}

/* Text Overrides */
.text-slate-400 {
  color: #737373 !important;
}

.text-slate-500 {
  color: #A3A3A3 !important;
}

.text-slate-600 {
  color: #D4D4D4 !important;
}

.text-slate-700 {
  color: #E5E5E5 !important;
}

.text-slate-800 {
  color: #F5F5F5 !important;
}

.text-navy-900 {
  color: #FFFFFF !important;
}

.text-navy-800 {
  color: #E5E5E5 !important;
}

/* Primary CTA Gold Button visual overrides */
.bg-gradient-to-r.from-brand-500 {
  background: linear-gradient(90deg, #C8A96B 0%, #D4AF37 100%) !important;
  color: #0D0D0D !important;
  font-weight: 700 !important;
}

.bg-gradient-to-r.from-brand-500:hover {
  background: linear-gradient(90deg, #D4AF37 0%, #F1E2B8 100%) !important;
  color: #0D0D0D !important;
  box-shadow: 0 10px 30px rgba(200, 169, 107, 0.35) !important;
}

.bg-gradient-to-r.from-brand-500 i,
.bg-gradient-to-r.from-brand-500 span {
  color: #0D0D0D !important;
}

/* Secondary CTA Button visual overrides */
.bg-white.border-slate-200,
.bg-white.border-slate-200\/80,
.bg-white.border-slate-200\/40 {
  background-color: transparent !important;
  border-color: rgba(200, 169, 107, 0.4) !important;
  color: #C8A96B !important;
}

.bg-white.border-slate-200:hover,
.bg-white.border-slate-200\/80:hover,
.bg-white.border-slate-200\/40:hover {
  background-color: rgba(200, 169, 107, 0.08) !important;
  border-color: #C8A96B !important;
  color: #F1E2B8 !important;
}

.bg-white.border-slate-200 i,
.bg-white.border-slate-200\/80 i,
.bg-white.border-slate-200 span,
.bg-white.border-slate-200\/80 span {
  color: #C8A96B !important;
}

.bg-white.border-slate-200:hover i,
.bg-white.border-slate-200\/80:hover i {
  color: #F1E2B8 !important;
}

/* Form Inputs Redesign */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  background-color: #121212 !important;
  border: 1px solid rgba(200, 169, 107, 0.25) !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: #C8A96B !important;
  box-shadow: 0 0 12px rgba(200, 169, 107, 0.25) !important;
  outline: none !important;
}

/* Dynamic Gradient Banners Override */
.bg-gradient-to-tr.from-brand-600.to-sky-700,
.bg-gradient-to-tr.from-mint-600.to-emerald-700,
.bg-gradient-to-tr.from-sky-600.to-sky-700 {
  background: linear-gradient(135deg, #121212 0%, #0D0D0D 100%) !important;
  border-bottom: 1px solid rgba(200, 169, 107, 0.15) !important;
  position: relative;
}

.bg-gradient-to-tr.from-brand-600.to-sky-700::before,
.bg-gradient-to-tr.from-mint-600.to-emerald-700::before,
.bg-gradient-to-tr.from-sky-600.to-sky-700::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(200, 169, 107, 0.06) 0%, transparent 80%) !important;
  pointer-events: none;
}

/* Custom Highlight Gradients */
.gradient-text-sky-emerald {
  background: linear-gradient(135deg, #F1E2B8 0%, #C8A96B 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.gradient-bg-sky-emerald {
  background: linear-gradient(135deg, #C8A96B 0%, #D4AF37 100%) !important;
}

.gradient-bg-light {
  background: radial-gradient(circle at 50% 50%, #161616 0%, #0D0D0D 90%) !important;
}

/* Accordion Active States Custom Styling */
.border-brand-500 {
  border-color: #C8A96B !important;
  box-shadow: 0 10px 30px rgba(200, 169, 107, 0.1) !important;
}

/* Active Step Badge Circles */
.bg-brand-500 {
  background-color: #C8A96B !important;
  color: #0D0D0D !important;
}

.bg-mint-500 {
  background-color: #D4AF37 !important;
  color: #0D0D0D !important;
}

.text-brand-600 {
  color: #C8A96B !important;
}

.text-mint-600 {
  color: #D4AF37 !important;
}

/* Alert boxes, warnings, and badges theme overrides */
.bg-sky-50,
.bg-amber-50,
.bg-brand-50,
.bg-mint-50,
.bg-sky-50\/70,
.bg-brand-50\/70,
.bg-mint-50\/70 {
  background-color: rgba(200, 169, 107, 0.08) !important;
}

.border-sky-100,
.border-amber-200,
.border-brand-100,
.border-mint-100 {
  border-color: rgba(200, 169, 107, 0.2) !important;
}

.text-sky-700,
.text-amber-800,
.text-brand-600,
.text-mint-600,
.text-mint-200 {
  color: #F1E2B8 !important;
}