/* =========================
   Vietnexa Campaign - Glass UI
   Apply to widget container
   ========================= */

/* Option A: if you add class="... vnx-glass" to the root */
[data-vnx-campaign].vnx-glass,
[data-vnx-campaign].vnx-glass * {
  -webkit-tap-highlight-color: transparent;
}

/* Option B: apply to all campaign widgets without adding any class */
[data-vnx-campaign]{
  /* override existing bg-white + border-gray-100 */
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;

  /* iOS-like frosted glass */
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);

  /* premium shadow */
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.10);

  /* keep crisp edges */
  border-width: 1px !important;
}

/* Subtle "sheen" overlay (like iOS card) */
[data-vnx-campaign]::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* glossy top-left to bottom-right */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.60) 0%,
    rgba(255,255,255,0.18) 35%,
    rgba(255,255,255,0.10) 60%,
    rgba(255,255,255,0.06) 100%
  );

  opacity: 0.75;
}

/* Add a soft inner highlight for depth */
[data-vnx-campaign]::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: 1.25rem; /* matches rounded-2xl look */
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
  opacity: 0.55;
}

/* Ensure the internal gradient overlay doesn't over-stack with glass */
[data-vnx-campaign] > .absolute.inset-0.bg-gradient-to-br{
  opacity: 0.45;
}

/* Improve text clarity on glass */
[data-vnx-campaign] h3{
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
[data-vnx-campaign] p{
  /* slightly increase contrast without changing Tailwind classes */
  color: rgba(55, 65, 81, 0.92); /* near text-gray-700 */
}

/* Close button: make it also glassy */
[data-vnx-campaign] [data-vnx-campaign-close]{
  background: rgba(255,255,255,0.70) !important;
  border: 1px solid rgba(255,255,255,0.38);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* The countdown pill: slightly glassy but keep readability */
[data-vnx-campaign] [data-vnx-countdown]{
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}

/* Optional: on very bright pages, keep the widget readable */
@media (prefers-contrast: more) {
  [data-vnx-campaign]{
    background: rgba(255,255,255,0.90) !important;
    border-color: rgba(0,0,0,0.06) !important;
  }
}

/* Fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-vnx-campaign]{
    background: rgba(255, 255, 255, 0.92) !important;
  }
  [data-vnx-campaign]::before{
    opacity: 0.35;
  }
}