/* =============================================
   Nirman Spa — Custom CSS (complements Tailwind CDN)
   ============================================= */

/* --- Opacity variants Tailwind CDN needs help with --- */
.bg-primary\/5  { background-color: rgba(201,169,110,0.05) !important; }
.bg-primary\/10 { background-color: rgba(201,169,110,0.10) !important; }
.bg-primary\/20 { background-color: rgba(201,169,110,0.20) !important; }
.bg-primary\/90 { background-color: rgba(201,169,110,0.90) !important; }
.text-primary\/70 { color: rgba(201,169,110,0.70) !important; }
.text-primary\/80 { color: rgba(201,169,110,0.80) !important; }
.border-primary\/20 { border-color: rgba(201,169,110,0.20) !important; }
.border-primary\/30 { border-color: rgba(201,169,110,0.30) !important; }
.border-primary\/40 { border-color: rgba(201,169,110,0.40) !important; }
.border-white\/5  { border-color: rgba(255,255,255,0.05) !important; }
.border-white\/10 { border-color: rgba(255,255,255,0.10) !important; }
.border-white\/20 { border-color: rgba(255,255,255,0.20) !important; }
.bg-black\/40  { background-color: rgba(0,0,0,0.40) !important; }
.bg-black\/60  { background-color: rgba(0,0,0,0.60) !important; }
.bg-black\/70  { background-color: rgba(0,0,0,0.70) !important; }
.bg-background\/95 { background-color: rgba(10,10,10,0.95) !important; }
.bg-background\/80 { background-color: rgba(10,10,10,0.80) !important; }
.bg-background\/60 { background-color: rgba(10,10,10,0.60) !important; }
.bg-card\/80   { background-color: rgba(17,17,17,0.80) !important; }
.bg-card\/50   { background-color: rgba(17,17,17,0.50) !important; }
.bg-card\/95   { background-color: rgba(17,17,17,0.95) !important; }
.bg-secondary\/30 { background-color: rgba(30,30,30,0.30) !important; }
.bg-secondary\/40 { background-color: rgba(30,30,30,0.40) !important; }
.bg-secondary\/50 { background-color: rgba(30,30,30,0.50) !important; }

/* --- Hover states --- */
.hover\:bg-primary\/10:hover   { background-color: rgba(201,169,110,0.10) !important; }
.hover\:bg-primary\/90:hover   { background-color: rgba(201,169,110,0.90) !important; }
.hover\:border-primary\/20:hover { border-color: rgba(201,169,110,0.20) !important; }
.hover\:border-primary\/30:hover { border-color: rgba(201,169,110,0.30) !important; }
.hover\:border-primary\/40:hover { border-color: rgba(201,169,110,0.40) !important; }
.hover\:text-primary:hover { color: #C9A96E !important; }

/* Group hover */
.group:hover .group-hover\:border-primary\/20 { border-color: rgba(201,169,110,0.20) !important; }
.group:hover .group-hover\:bg-primary\/20 { background-color: rgba(201,169,110,0.20) !important; }
.group:hover .group-hover\:text-primary { color: #C9A96E !important; }
.group:hover .group-hover\:opacity-100 { opacity: 1 !important; }

/* --- Gradient overlays --- */
.from-background { --tw-gradient-from: #0A0A0A; }
.from-background\/80 { --tw-gradient-from: rgba(10,10,10,0.80); }
.from-background\/60 { --tw-gradient-from: rgba(10,10,10,0.60); }
.from-card  { --tw-gradient-from: #111111; }
.from-card\/90 { --tw-gradient-from: rgba(17,17,17,0.90); }
.to-background { --tw-gradient-to: #0A0A0A; }
.to-card\/50 { --tw-gradient-to: rgba(17,17,17,0.50); }
.via-background\/60 { --tw-gradient-via: rgba(10,10,10,0.60); }
.via-card\/90 { --tw-gradient-via: rgba(17,17,17,0.90); }

/* --- Utilities --- */
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* --- Smooth scroll --- */
html { scroll-behavior: smooth; }

/* --- Body defaults --- */
body {
  font-family: 'Inter', sans-serif;
  background-color: #0A0A0A;
  color: #F5F0E8;
  overflow-x: hidden;
}

/* --- Headings use Playfair --- */
h1, h2, h3, h4, h5, h6, .font-serif { font-family: 'Playfair Display', serif; }

/* --- Selection --- */
::selection { background-color: #C9A96E; color: #0A0A0A; }

/* --- WhatsApp green button --- */
.btn-whatsapp {
  background-color: #25D366;
  color: #fff;
  transition: background-color 0.2s ease;
}
.btn-whatsapp:hover { background-color: #1ebe5d; }

/* --- Announcement bar ticker (mobile) --- */
@keyframes ticker {
  0%  { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  95% { opacity: 0; transform: translateY(-6px); }
  100%{ opacity: 0; transform: translateY(-6px); }
}

/* --- AOS custom timing --- */
[data-aos] { transition-duration: 600ms !important; }

/* --- Accordion arrow transition --- */
.faq-arrow { transition: transform 0.2s ease; }
.faq-trigger.open .faq-arrow { transform: rotate(180deg); }
.faq-content { display: none; }
.faq-content.open { display: block; }

/* --- Therapy card image --- */
.therapy-img { object-fit: cover; width: 100%; height: 208px; display: block; }

/* --- Floating CTA --- */
#floating-cta { z-index: 50; }

/* --- Mobile sticky footer CTA --- */
@media (max-width: 767px) {
  #floating-cta { position: fixed; bottom: 0; left: 0; right: 0; }
  body { padding-bottom: 72px; }
}

/* --- Form inputs --- */
.spa-input {
  width: 100%;
  background-color: #0A0A0A;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 12px 16px;
  color: #F5F0E8;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
  appearance: none;
}
.spa-input::placeholder { color: #a6a6a6; }
.spa-input:focus { border-color: #C9A96E; }

/* --- Trust chip --- */
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: rgba(0,0,0,0.40);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9999px;
  font-size: 12px;
  color: #fff;
}

/* --- Fade-in for hero elements (no JS needed) --- */
.hero-fade-in {
  animation: heroFadeIn 0.8s ease both;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Membership featured card --- */
.membership-featured { background-color: #C9A96E; color: #0A0A0A; }
.membership-featured .perk-check { color: rgba(10,10,10,0.90); }

/* --- Map embed --- */
.map-embed { border: 0; width: 100%; height: 100%; }

/* --- Border bottom glow for header --- */
.header-scrolled {
  background-color: rgba(10,10,10,0.95) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #262626;
}

/* ---- Step timeline line ---- */
.step-line {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, rgba(201,169,110,0.40), rgba(201,169,110,0.10), transparent);
}