/**
 * @package     J2Commerce
 * @subpackage  Plugin.J2Commerce.AppStickybar
 *
 * @copyright   (C)2024-2026 J2Commerce, LLC <https://www.j2commerce.com>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 *
 * Colours come from the --j2c-stickybar-* tokens, which fall back to the active
 * Bootstrap theme, so a template restyles the bar without overriding the layout.
 * stickybar.js sets --j2c-stickybar-h; the scroll padding keeps a focused element
 * clear of the bar (WCAG 2.4.11).
 */
html { scroll-padding-bottom: var(--j2c-stickybar-h, 0px); }

.j2c-stickybar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1030;
  padding-block: 0.75rem max(0.75rem, env(safe-area-inset-bottom));
  background-color: var(--j2c-stickybar-bg, var(--bs-body-bg, #fff));
  color: var(--j2c-stickybar-color, var(--bs-body-color, #212529));
  border-top: 1px solid var(--j2c-stickybar-border, var(--bs-border-color, rgba(0, 0, 0, 0.175)));
  box-shadow: var(--j2c-stickybar-shadow, 0 -12px 28px -18px rgba(0, 0, 0, 0.45));
}
.j2c-stickybar[hidden] { display: none; }

.j2c-stickybar__inner { display: flex; align-items: center; gap: 0.75rem 1rem; }

.j2c-stickybar__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--j2c-stickybar-muted, var(--bs-secondary-color, #595c5f));
}
.j2c-stickybar__title {
  display: block;
  overflow: hidden;
  color: var(--j2c-stickybar-color, var(--bs-emphasis-color, #000));
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.j2c-stickybar__line,
.j2c-stickybar__summary {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.j2c-stickybar__line[hidden],
.j2c-stickybar__summary[hidden] { display: none; }

.j2c-stickybar__options { display: flex; flex: none; gap: 0.5rem; }
.j2c-stickybar__options[hidden] { display: none; }
.j2c-stickybar__option { min-width: 0; }
.j2c-stickybar__select { width: auto; max-width: 16rem; min-height: 2.75rem; }

.j2c-stickybar__add { flex: none; min-height: 2.75rem; white-space: nowrap; }
.j2c-stickybar__price[hidden] { display: none; }
.j2c-stickybar__close { flex: none; min-width: 2.75rem; min-height: 2.75rem; }

@media (max-width: 575.98px) {
  .j2c-stickybar__inner { flex-wrap: wrap; }
  .j2c-stickybar__text { display: none; }
  .j2c-stickybar__options { flex: 1 1 0; min-width: 0; }
  .j2c-stickybar__options--multi { flex-basis: 100%; order: -1; }
  .j2c-stickybar__option { flex: 1 1 0; }
  .j2c-stickybar__select { width: 100%; max-width: none; }
  /* Each mirrored option already carries its price, so the button drops it for room. */
  .j2c-stickybar--has-options .j2c-stickybar__price { display: none; }
  .j2c-stickybar:not(.j2c-stickybar--has-options) .j2c-stickybar__add,
  .j2c-stickybar__options--multi ~ .j2c-stickybar__add { flex: 1 1 auto; }
  .j2c-stickybar--desktop-only { display: none !important; }
}

/* The narrowest phones give the option its own row so the chosen value stays readable. */
@media (max-width: 374.98px) {
  .j2c-stickybar--has-options .j2c-stickybar__options { flex-basis: 100%; order: -1; }
  .j2c-stickybar--has-options .j2c-stickybar__add { flex: 1 1 auto; }
}

@media (min-width: 576px) {
  .j2c-stickybar--mobile-only { display: none !important; }
}