/* =============================
   Simple X Button with Glass Effect
   ============================= */
.X-button {
  background: rgba(255, 255, 255, 0.1) !important; /* 10% white with 90% transparency */
  backdrop-filter: blur(10px) !important; /* Blur effect */
  -webkit-backdrop-filter: blur(10px) !important; /* For Safari */
  border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Subtle border */
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 1000 !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  transition: all 0.2s ease !important;
}

.X-button:hover {
  background: rgba(255, 255, 255, 0.2) !important; /* Slightly more visible on hover */
}

.X-button svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #ffffff !important; /* White X icon for better visibility */
  stroke-width: 2px !important;
  color: #ffffff !important;
  fill: none !important;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)) !important; /* Subtle shadow for better visibility */
}