/**
 * Y888 Floating Widgets
 * Clean styles using design tokens only. No hashed classes.
 */

.float-widgets {
  position: fixed;
  top: 0;
  bottom: 0;
  /* Align with centered content column on desktop letterbox */
  left: max(0px, calc((100vw - min(100vw, 56.2219vh)) / 2));
  right: max(0px, calc((100vw - min(100vw, 56.2219vh)) / 2));
  z-index: 50;
  pointer-events: none;
  font-family: var(--y888-font-family);
}

/* Left-side widget (Download App) */
.float-widget--left {
  position: absolute;
  left: var(--y888-space-md);
  bottom: 1.6rem;
  pointer-events: auto;
}

/* Right-side stack */
.float-widgets--right {
  position: absolute;
  right: var(--y888-space-md);
  /* Moved up to make room for back-to-top button below (no overlap).
     Container bottom at 2.4rem, TOP button at 1.5rem sits below it. */
  bottom: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: var(--y888-space-md);
  align-items: flex-end;
  pointer-events: none;
}

.float-widgets--right .float-widget {
  pointer-events: auto;
}

/* Individual widget card */
.float-widget {
  position: relative;
  animation: float-widget-in var(--y888-transition-normal);
}

.float-widget__link {
  display: block;
  text-decoration: none;
}

.float-widget__image {
  display: block;
  width: 1.1rem;
  max-width: 80px;
  height: auto;
  border-radius: var(--y888-radius-md);
  box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.45);
}

/* Circular WhatsApp button */
.float-widget__link--circle {
  width: 0.9rem;
  max-width: 60px;
  height: 0.9rem;
  max-height: 60px;
  border-radius: 50%;
  background: var(--y888-success);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.45);
  transition: transform var(--y888-transition-fast);
}

.float-widget__link--circle:hover {
  transform: scale(1.06);
}

.float-widget__link--circle:active {
  transform: scale(0.96);
}

/* WhatsApp glyph (pure CSS) */
.float-widget__whatsapp-icon {
  width: 0.45rem;
  max-width: 30px;
  height: 0.45rem;
  max-height: 30px;
  background: var(--y888-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.2 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.4-.7-2.9-1.2-4.7-4.1-4.9-4.3-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5s.8 1.9.8 2c.1.1.1.3 0 .5-.3.6-.6.8-.4 1.1.7 1.2 1.6 2 2.8 2.6.3.2.5.1.7-.1l.8-.9c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.6.4 0 .1 0 .7-.2 1.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.2 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.4-.7-2.9-1.2-4.7-4.1-4.9-4.3-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5s.8 1.9.8 2c.1.1.1.3 0 .5-.3.6-.6.8-.4 1.1.7 1.2 1.6 2 2.8 2.6.3.2.5.1.7-.1l.8-.9c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.6.4 0 .1 0 .7-.2 1.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Dismiss (X) button */
.float-widget__close {
  position: absolute;
  top: -0.18rem;
  right: -0.18rem;
  width: 0.36rem;
  height: 0.36rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--y888-transition-fast), background var(--y888-transition-fast);
}

.float-widget__close:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.85);
}

.float-widget__close img {
  width: 0.2rem;
  height: 0.2rem;
}

/* Dismissed state */
.float-widget.is-dismissed {
  display: none;
}

/* Entrance animation */
@keyframes float-widget-in {
  from {
    opacity: 0;
    transform: translateY(0.2rem) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Keep clear of bottom nav on small screens */
@media (max-width: 480px) {
  .float-widget--left,
  .float-widgets--right {
    bottom: 2.4rem;
  }
}