:root {
    --site-bg-color: rgb(255, 255, 255);
  }



@keyframes soft-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.animate-soft-bounce {
  animation: soft-bounce 2s ease-in-out infinite;
}

  body {
    background-color: var(--site-bg-color);
    
  }
  
header {
  margin-bottom: -1px;
}
  

  .bg-dynamic {
    background-color: rgb(255, 255, 255);
  }

  .bg-dynamic1 {
    background-color: #333230;
    /*background-color: #382a1f;*/
  }
/* ===============================
   1️⃣ Hide caret everywhere by default
   =============================== */
/* Only hide caret in contenteditable or other text nodes, not all elements */
[contenteditable]:not(input):not(textarea) {
  caret-color: transparent;
}

/* ===============================
   2️⃣ Style all input/textarea fields
   =============================== */
input, textarea {
  caret-color: black;                 /* visible caret */
  overflow: visible;                  /* prevent caret from being clipped */
  position: relative;                 /* stacking context for proper rendering */
  line-height: 1.2;                   /* ensures caret height matches text */
  font-size: 1rem;                    /* adjust if needed */

  width: 100%;                        /* full width */
  
  /* Tailwind focus ring for inputs */
  outline: none;

}

.dynamic-text {
  color: white; /* default */
  text-shadow: 0 0 5px rgba(0,0,0,0.7); /* adds contrast on light backgrounds */
}

/* Optional: override for dynamically injected inputs (like popups) */
#popup-container input,
#popup-container textarea {
  caret-color: black;
  overflow: hidden;
  position: relative;
}



.hr-dynamic  {
  border-color: #ffffff;
  background-color: var(--site-bg-color);
  height: 2px;
}

.bg-rgb-dark {
  /*background-color: rgb(162, 214, 190);*/
  /*background-color: #ff9248;*/
    background-color: #333230;
}

/* STATIC fade images */

.fade-img {
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}
.fade-img.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}


/* DYNAMIC reveal cards */
.reveal-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-card.is-revealed {
  opacity: 1;
  transform: none;
}


@keyframes bounce-whatsapp {
  0%, 100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); } /* change -8px for subtler/stronger bounce */
}

.animate-bounce-whatsapp {
  animation: bounce-whatsapp 1.5s ease-in-out infinite;
}

/* smooth movement when we change bottom */
#whatsapp-btn {
  transition: bottom 0.22s ease;
  z-index: 9999; /* keep it above footer */
}

/* optional: ensure animation is fully off when we remove class */
#whatsapp-btn.animate-disabled {
  animation: none !important;
}

.add-to-cart-btn {
  color: #ffffff;
  background-color: #dbc697;
  border: 1px solid #dbc697;
  transition: background-color 0.3s ease;
}

.add-to-cart-btn:hover {
  background-color: #ffb38a;
}