/* ============================================================
   StyleKro generate button — single source of truth (CSS half).
   ------------------------------------------------------------
   Pairs with web/stylekro_button.js (window.StyleKroButton). One
   canonical look for the "Generate" control in EVERY shop, the
   wardrobe page and the buyer item page. Reuses the --stylekro-*
   tokens defined in web/stylekro_gen.css (loaded before this file),
   and the .stylekro-lockup* logo art also defined there.

   Loaded AFTER stylekro_gen.css so these win where they overlap.
   ============================================================ */

.stylekro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--stylekro-float-height, 46px);
  padding: 0 var(--stylekro-float-padding-x, 18px);
  border-radius: 999px;
  border: 1px solid var(--stylekro-logo-pill-border, rgba(255, 45, 111, 0.34));
  background: var(--stylekro-logo-pill-bg, linear-gradient(135deg, #fff 0%, #fff6f9 100%));
  background-size: 140% 140%;
  box-shadow: var(--stylekro-logo-pill-shadow, 0 16px 34px -22px rgba(255, 45, 111, 0.56), inset 0 0 0 1px rgba(255, 255, 255, 0.72));
  color: #17121b;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease,
    background-position .18s ease, filter .18s ease, opacity .15s ease;
}
.stylekro-btn:hover:not(:disabled) {
  background: var(--stylekro-logo-pill-bg-hover, linear-gradient(135deg, #fff 0%, #fff0f5 100%));
  background-position: 100% 50%;
  box-shadow: 0 20px 40px -24px rgba(255, 45, 111, 0.68), inset 0 0 0 1px rgba(255, 255, 255, 0.84);
  transform: translateY(-3px);
  filter: saturate(1.05);
}
.stylekro-btn:active:not(:disabled) {
  transform: translateY(0);
}
.stylekro-btn:disabled {
  opacity: 0.55;
  box-shadow: none;
  transform: none;
  filter: saturate(0.85);
  cursor: not-allowed;
}

/* Count / badge chip (e.g. tile surfaces assigned, items selected). */
.stylekro-btn-count {
  order: 2;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--stylekro-grad, linear-gradient(135deg, #ff2d6f 0%, #ff7a3d 100%));
  box-shadow: 0 6px 14px -10px rgba(255, 45, 111, 0.72), inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  font-size: 12.5px;
  font-weight: 800;
}

/* Full-width block — buyer item page CTA, wardrobe outfit page. */
.stylekro-btn--block {
  width: 100%;
}

/* Floating centered pill — tile & tattoo inline room studios. */
.stylekro-btn--floating {
  position: fixed;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 120;
  min-width: var(--stylekro-float-min-width, 140px);
  backdrop-filter: blur(10px);
  animation: stylekro-fab-pop 200ms cubic-bezier(.2, .9, .3, 1.2);
}
.stylekro-btn--floating:hover:not(:disabled) {
  transform: translateX(-50%) translateY(-3px);
}
.stylekro-btn--floating:active:not(:disabled) {
  transform: translateX(-50%);
}

/* Per-context flex sizing where the button sits in an existing row. */
.bi-cta-row .stylekro-btn { flex: 1 1 0; }
.tr2-actions .stylekro-btn { flex: 1 1 auto; }

@media (max-width: 480px) {
  .stylekro-btn--floating { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 860px) {
  .stylekro-btn--floating { bottom: 24px; }
}