/* ==========================================================
   VextaLearn — Floating Cart launcher.

   Sits directly above the global chat launcher (see
   css/chat-widget.css) and is only ever visible while the
   student's cart has at least one item. Server-rendered with
   the persisted cart count on first paint (base.html); kept in
   sync after Add to Cart / Remove by main.js's updateCartBadge(),
   the same function that already updates the header cart badge,
   so there is a single source of truth for the count.

   Positioning mirrors chat-widget.css's own numbers exactly and
   simply adds the chat launcher's height + a fixed gap, so the
   two buttons never drift apart or collide with the mobile
   bottom nav / PWA install card:
     mobile:  chat bottom  76px, height 54px, gap 18px -> 148px
     desktop: chat bottom  20px, height 52px, gap 18px ->  90px
   ========================================================== */

.vxt-cart-launcher {
  position: fixed;
  right: calc(16px + var(--vxt-safe-right, 0px));
  bottom: calc(148px + var(--vxt-safe-bottom, 0px));
  z-index: 1036;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 54px;
  height: 54px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--primary, #6D28D9);
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px var(--primary-a35, rgba(109, 40, 217, 0.35));
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.18s ease, bottom 0.2s ease;
}
.vxt-cart-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 30px var(--primary-a35, rgba(109, 40, 217, 0.42)); color: #fff; }
.vxt-cart-launcher:active { transform: scale(0.95); }
.vxt-cart-launcher:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--primary-a35, rgba(109, 40, 217, 0.32)); }

.vxt-cart-launcher__icon { display: inline-flex; align-items: center; justify-content: center; width: 100%; }

/* Desktop label: reads as a "Cart" pill, matching the chat launcher's
   own compact/expanded pattern. */
.vxt-cart-launcher__label {
  display: none;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Hidden whenever the cart is empty; toggled via the `hidden` attribute
   by cart-widget.js / main.js's updateCartBadge(). */
.vxt-cart-launcher[hidden] { display: none !important; }

/* Entrance animation when the button first appears after Add to Cart,
   and a matching exit before it's hidden when the cart empties.
   Both are short and restrained per spec. */
.vxt-cart-launcher--enter { animation: vxtCartFabIn 0.22s ease-out; }
.vxt-cart-launcher--leave { opacity: 0; transform: scale(0.85); pointer-events: none; }

@keyframes vxtCartFabIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* Item-count badge. */
.vxt-cart-launcher__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill, 999px);
  /* VextaLearn's established gold accent value (same as --vexta-gold /
     --adm-gold / --vxc-gold elsewhere in the codebase) — not a new color. */
  background: #F59E0B;
  color: #1F2937;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.vxt-cart-launcher__badge[hidden] { display: none !important; }

/* Step up above the PWA install card, exactly like the chat launcher. */
html.vxt-install-open .vxt-cart-launcher {
  bottom: calc(160px + var(--vxt-install-height, 160px) + var(--vxt-safe-bottom, 0px));
}

@media (min-width: 992px) {
  .vxt-cart-launcher {
    right: calc(20px + var(--vxt-safe-right, 0px));
    bottom: calc(90px + var(--vxt-safe-bottom, 0px));
    width: auto;
    height: 52px;
    padding: 0 20px;
    border-radius: 999px;
  }
  .vxt-cart-launcher__label { display: inline; }
  .vxt-cart-launcher__badge { top: -6px; right: -6px; }

  html.vxt-install-open .vxt-cart-launcher {
    bottom: calc(90px + var(--vxt-safe-bottom, 0px));
    right: calc(420px + var(--vxt-safe-right, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .vxt-cart-launcher { transition: none; }
  .vxt-cart-launcher:hover { transform: none; }
  .vxt-cart-launcher--enter { animation: none; }
}