/* ═══════════════════════════════════════════════════════════════
   PREMIUM LIQUID GLASS CLAYMORPHISM 
   Overrides for Buttons, Divs, Navbar, and Budget Planner
═══════════════════════════════════════════════════════════════ */

/* ── 1. BUDGET PLANNER ── */
.budget-glass {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 32px !important;
  box-shadow: 
    0 24px 60px rgba(0,0,0,0.08), 
    inset 4px 4px 15px rgba(255,255,255,0.9), 
    inset -4px -4px 15px rgba(0,0,0,0.02) !important;
  padding: 40px !important;
}

.input-clay {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  border-radius: 16px !important;
  box-shadow: 
    inset 4px 4px 10px rgba(0,0,0,0.05), 
    inset -4px -4px 10px rgba(255,255,255,0.9) !important;
  transition: all 0.3s !important;
  color: #333 !important;
}
.input-clay:focus {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: var(--saffron, #ff9933) !important;
  box-shadow: 
    inset 2px 2px 6px rgba(0,0,0,0.03), 
    0 0 0 4px rgba(255,153,51,0.2) !important;
  outline: none !important;
}
.input-lbl {
  color: #555 !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
}

/* ── 2. NAVBAR (TOPNAVBAR) ── */
.nav-luxury {
  top: 16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 1200px !important;
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  border-bottom: 1px solid rgba(255,255,255,0.4) !important;
  box-shadow: 
    0 10px 40px rgba(0,0,0,0.08),
    inset 2px 2px 10px rgba(255,255,255,0.9) !important;
  padding: 6px 40px !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.nav-luxury.scrolled {
  top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.9) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,1) !important;
  padding: 6px 40px !important;
  transform: none !important;
  left: 0 !important;
}

/* ── 3. LIQUID GLASS BUTTONS ── */
.btn-saffron, .btn-primary, .btn-wa, .nav-cta, .btn-outline {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 
    0 8px 20px rgba(255,153,51,0.2), 
    inset 2px 2px 8px rgba(255,255,255,0.5),
    inset -2px -2px 8px rgba(0,0,0,0.1) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  z-index: 1;
}

.btn-saffron, .nav-cta {
  background: linear-gradient(135deg, rgba(255,153,51,0.85), rgba(255,119,0,0.9)) !important;
  color: #000 !important;
}

.btn-wa {
  background: linear-gradient(135deg, rgba(37,211,102,0.85), rgba(18,140,126,0.9)) !important;
  box-shadow: 
    0 8px 20px rgba(37,211,102,0.2), 
    inset 2px 2px 8px rgba(255,255,255,0.5),
    inset -2px -2px 8px rgba(0,0,0,0.1) !important;
}

.btn-saffron:hover, .btn-primary:hover, .nav-cta:hover {
  transform: translateY(-4px) scale(1.03) !important;
  background: linear-gradient(135deg, rgba(255,160,60,0.95), rgba(255,130,0,1)) !important;
  box-shadow: 
    0 15px 35px rgba(255,153,51,0.4), 
    inset 2px 2px 10px rgba(255,255,255,0.8),
    inset -2px -2px 10px rgba(0,0,0,0.2) !important;
}

.btn-wa:hover {
  transform: translateY(-4px) scale(1.03) !important;
  background: linear-gradient(135deg, rgba(40,220,110,0.95), rgba(20,150,135,1)) !important;
  box-shadow: 
    0 15px 35px rgba(37,211,102,0.4), 
    inset 2px 2px 10px rgba(255,255,255,0.8),
    inset -2px -2px 10px rgba(0,0,0,0.2) !important;
}

/* Liquid Light Reflection effect on buttons */
.btn-saffron::after, .btn-primary::after, .btn-wa::after, .nav-cta::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  transition: 0s;
  z-index: -1;
}
.btn-saffron:hover::after, .btn-primary:hover::after, .btn-wa:hover::after, .nav-cta:hover::after {
  left: 200%;
  transition: 0.8s ease-in-out;
}

/* ── 4. CLAYMORPHIC DIVS & CARDS ── */
.clay-card, .service-card, .review-card, .why-clay-card, .act-clay-card {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
  border-bottom: 1px solid rgba(255,255,255,0.3) !important;
  border-right: 1px solid rgba(255,255,255,0.3) !important;
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.06), 
    inset 4px 4px 15px rgba(255,255,255,0.9), 
    inset -4px -4px 15px rgba(0,0,0,0.03) !important;
  border-radius: 24px !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.clay-card:hover, .service-card:hover, .review-card:hover, .why-clay-card:hover, .act-clay-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 
    0 25px 50px rgba(0,0,0,0.1), 
    inset 4px 4px 20px rgba(255,255,255,1), 
    inset -4px -4px 20px rgba(0,0,0,0.04) !important;
  border-color: rgba(255,255,255,1) !important;
}

/* ── 5. MOBILE NAV UPGRADE ── */
.mobile-nav {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 
    0 -10px 40px rgba(0,0,0,0.08),
    inset 0 2px 10px rgba(255,255,255,0.8) !important;
  border-radius: 24px 24px 0 0 !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  padding-top: 12px !important;
}

/* ── 6. HERO BANNER BACKGROUND ── */
.light-hero {
  background-image: url("images/image copy.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  max-width: 100% !important;
  min-height: 100vh !important;
}

@media (max-width: 768px) {
  .light-hero {
    background-image: url("images/image.png") !important;
    background-position: center top !important;
    min-height: 100vh !important;
  }
  .light-hero .lh-h1,
  .light-hero .lh-sub,
  .light-hero .lh-badge {
    display: none !important;
  }
  
  .lh-actions {
    position: absolute !important;
    bottom: 80px !important;
    left: 0 !important;
    right: 0 !important;
    justify-content: center !important;
    padding: 0 20px !important;
  }
  
  .nav-luxury {
    padding: 4px 16px !important;
  }
  
  .nav-logo-text {
    font-size: 20px !important;
  }
  
  .nav-logo-sub {
    font-size: 9px !important;
    margin-top: 2px !important;
    letter-spacing: 0.2em !important;
  }
}

.lh-btn-primary, .lh-btn-secondary {
  color: #000 !important;
}



/* -- FORCE BLACK TEXT & HOLLOW TEXT -- */
:root, [data-theme="dark"], [data-theme="luxury"], [data-theme="valentine"], [data-theme="gold"] {
  --text-primary: #000000 !important;
  --text-secondary: #222222 !important;
  --text-muted: #444444 !important;
}

body {
  color: #000000 !important;
}

.lh-h1, .section-title {
  color: transparent !important;
  -webkit-text-stroke: 1.5px #000 !important;
  font-weight: 900 !important;
}

.lh-h1 span, .section-title .grad {
  -webkit-text-stroke: 0 !important;
}
.lh-h1 span.saffron { color: #ff9933 !important; -webkit-text-fill-color: #ff9933 !important; }
.lh-h1 span.green { color: #138808 !important; -webkit-text-fill-color: #138808 !important; }


/* -- 3D INDEPENDENCE DAY ANIMATIONS -- */
.curtain-left, .curtain-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  z-index: 99;
  pointer-events: none;
  animation: curtain-open 2.5s 0.5s forwards cubic-bezier(0.77, 0, 0.175, 1);
  box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}
.curtain-left {
  left: 0;
  transform-origin: left;
  background: linear-gradient(90deg, #ff9933 0%, #ffffff 50%, #138808 100%);
  border-right: 5px solid rgba(255,255,255,0.8);
}
.curtain-right {
  right: 0;
  transform-origin: right;
  background: linear-gradient(-90deg, #ff9933 0%, #ffffff 50%, #138808 100%);
  border-left: 5px solid rgba(255,255,255,0.8);
}

@keyframes curtain-open {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

.ribbon-container {
  position: absolute;
  top: 0; left: 0; right: 0; height: 100%;
  overflow: hidden;
  z-index: 98;
  pointer-events: none;
}

.ribbon {
  position: absolute;
  width: 15px;
  height: 60px;
  top: -100px;
  border-radius: 2px;
  animation: fall linear infinite;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.ribbon::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  border-left: 7.5px solid transparent;
  border-right: 7.5px solid transparent;
  border-bottom: 15px solid rgba(0,0,0,0.1);
}

.ribbon.saffron { background: #ff9933; }
.ribbon.white { background: #ffffff; border: 1px solid #ddd; }
.ribbon.green { background: #138808; }

.ribbon:nth-child(1) { left: 10%; animation-duration: 4s; animation-delay: 0s; }
.ribbon:nth-child(2) { left: 20%; animation-duration: 5s; animation-delay: 1s; }
.ribbon:nth-child(3) { left: 30%; animation-duration: 4.5s; animation-delay: 2s; }
.ribbon:nth-child(4) { left: 45%; animation-duration: 5.5s; animation-delay: 0.5s; }
.ribbon:nth-child(5) { left: 60%; animation-duration: 6s; animation-delay: 1.5s; }
.ribbon:nth-child(6) { left: 70%; animation-duration: 4.2s; animation-delay: 0.2s; }
.ribbon:nth-child(7) { left: 80%; animation-duration: 5.8s; animation-delay: 2.5s; }
.ribbon:nth-child(8) { left: 90%; animation-duration: 4.8s; animation-delay: 1.2s; }
.ribbon:nth-child(9) { left: 5%; animation-duration: 5.2s; animation-delay: 3s; }

@keyframes fall {
  0% { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1; }
  100% { transform: translateY(120vh) rotateX(360deg) rotateY(180deg) rotateZ(90deg); opacity: 0; }
}