/**
 * Y888 Rewrite — Floating Widgets
 * Section 8 of 8: <floating-widgets> (download-app popup, promo cards, WhatsApp button)
 *
 * Fresh from-scratch stylesheet for the floating-widgets markup:
 *   .float-widgets > .float-widget--left + .float-widgets--right > .float-widget
 * Uses design tokens only (css/tokens.css). No hashed class names.
 * Load order: after css/tokens.css, alongside the other css/rewrite/*.css files.
 */

/* ------------------------------------------------------------------ */
/* 1. Overlay layer                                                    */
/* ------------------------------------------------------------------ */

.float-widgets {
  position: fixed;
  inset: 0;
  z-index: var(--y888-z-widgets, 50);
  pointer-events: none; /* clicks pass through except on widgets themselves */
  font-family: var(--y888-font-family);
}

/* ------------------------------------------------------------------ */
/* 2. Left slot — Download App popup                                   */
/* ------------------------------------------------------------------ */

.float-widget--left {
  position: absolute;
  left: var(--y888-space-md);
  bottom: 6rem;
  pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/* 3. Right slot — stacked promo cards                                 */
/* ------------------------------------------------------------------ */

.float-widgets--right {
  position: absolute;
  right: var(--y888-space-md);
  bottom: 6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--y888-space-md);
  pointer-events: none;
}

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

/* ------------------------------------------------------------------ */
/* 4. Widget card                                                      */
/* ------------------------------------------------------------------ */

.float-widget {
  position: relative;
  animation: y888-widget-enter var(--y888-transition-normal);
}

.float-widget__link {
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

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

/* ------------------------------------------------------------------ */
/* 5. Circular WhatsApp button                                         */
/* ------------------------------------------------------------------ */

.float-widget__link--circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--y888-success);
  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 drawn with a pure-CSS SVG mask (no image asset needed) */
.float-widget__whatsapp-icon {
  width: 0.6rem;
  height: 0.6rem;
  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;
}

/* ------------------------------------------------------------------ */
/* 6. Dismiss (X) button                                               */
/* ------------------------------------------------------------------ */

.float-widget__close {
  position: absolute;
  top: -0.18rem;
  right: -0.18rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.36rem;
  height: 0.36rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  cursor: pointer;
  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;
}

/* ------------------------------------------------------------------ */
/* 7. Dismissed state (JS toggles .is-dismissed, persisted in storage) */
/* ------------------------------------------------------------------ */

.float-widget.is-dismissed {
  display: none;
}

/* ------------------------------------------------------------------ */
/* 8. Entrance animation                                               */
/* ------------------------------------------------------------------ */

@keyframes y888-widget-enter {
  from {
    opacity: 0;
    transform: translateY(0.2rem) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ------------------------------------------------------------------ */
/* 9. Small screens — keep clear of the bottom nav                     */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
  .float-widget--left,
  .float-widgets--right {
    bottom: 5.2rem;
  }
}

/* ------------------------------------------------------------------ */
/* 10. Reduced motion                                                  */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .float-widget {
    animation: none;
  }

  .float-widget__link--circle,
  .float-widget__close {
    transition: none;
  }
}