/* ============================================
   Floating Widget - shared component
   Used by product page (home.html) and official home (official_home.html)
   ============================================ */

.floating-widget {
  position: fixed;
  z-index: 60;
  display: grid;
  place-items: center;
  --floating-gap: 10px;
  --floating-offset: calc(var(--floating-offset-index, 0) * (var(--floating-height, 64px) + var(--floating-gap)));
  width: var(--floating-width, 64px);
  height: var(--floating-height, 64px);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: var(--cherry, #98244f);
  color: #fff;
  box-shadow: 0 14px 32px rgba(152, 36, 79, 0.28);
  font-weight: 1000;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .25s ease, scale .25s cubic-bezier(.34, 1.3, .64, 1);
}
.floating-widget:hover {
  scale: 1.06;
  box-shadow: 0 18px 40px rgba(152, 36, 79, 0.38);
}

.floating-widget img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.floating-widget .floating-text {
  font-size: 1.5rem;
  font-weight: 1000;
  color: #fff;
  line-height: 1;
}
/* Text-only widget: auto-size to fit the label instead of a fixed square */
.floating-widget.floating-widget-text {
  width: auto;
  max-width: calc(100vw - 44px);
  padding: 0 22px;
}
.floating-widget.floating-widget-text .floating-text {
  max-width: 100%;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Combo widget: image on the left + text on the right, connected, auto width */
.floating-widget.floating-widget-combo {
  display: flex;
  align-items: center;
  width: auto;
  max-width: calc(100vw - 44px);
  padding: 0;
  border: none;
}
.floating-widget.floating-widget-combo img {
  width: var(--floating-height, 64px);
  height: var(--floating-height, 64px);
  flex: 0 0 auto;
  background: var(--cherry, #98244f);
  object-fit: contain;
}
.floating-widget.floating-widget-combo .floating-text {
  max-width: 100%;
  padding: 0 20px 0 14px;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Left-positioned combo: reverse order so text is closest to the edge */
.float-left-bottom.floating-widget-combo,
.float-left-middle.floating-widget-combo {
  flex-direction: row-reverse;
}
.float-left-bottom.floating-widget-combo .floating-text,
.float-left-middle.floating-widget-combo .floating-text {
  padding: 0 14px 0 20px;
}

.float-shape-rounded { border-radius: 18px; }
.float-shape-circle { border-radius: 999px; width: var(--floating-height, 64px); }
.float-shape-square { border-radius: 0; }
.float-shape-pill { border-radius: 999px; }
.float-shape-bookmark { border-radius: 18px 0 0 18px; border-right: 0; }

.float-left-bottom.float-shape-bookmark,
.float-left-middle.float-shape-bookmark {
  border-radius: 0 18px 18px 0;
  border-right: 2px solid rgba(255, 255, 255, 0.9);
  border-left: 0;
}

.float-right-bottom { right: 22px; bottom: calc(22px + var(--floating-offset)); }
.float-left-bottom { left: 22px; bottom: calc(22px + var(--floating-offset)); }
.float-right-middle { right: calc(22px + var(--floating-offset)); top: 50%; transform: translateY(-50%); }
.float-left-middle { left: calc(22px + var(--floating-offset)); top: 50%; transform: translateY(-50%); }

.float-right-bottom.float-shape-bookmark,
.float-right-middle.float-shape-bookmark { right: var(--floating-offset); }
.float-left-bottom.float-shape-bookmark,
.float-left-middle.float-shape-bookmark { left: var(--floating-offset); }

/* Mobile: lift bottom widgets above the fixed checkout bar.
   Must live in this file (loaded after public.css) to win the cascade. */
@media (max-width: 640px) {
  .floating-widget { z-index: 80; }
  .float-right-bottom { right: 16px; bottom: calc(110px + env(safe-area-inset-bottom, 0px) + var(--floating-offset)); }
  .float-left-bottom { left: 16px; bottom: calc(110px + env(safe-area-inset-bottom, 0px) + var(--floating-offset)); }
  .float-right-middle { right: calc(14px + var(--floating-offset)); }
  .float-left-middle { left: calc(14px + var(--floating-offset)); }
}