/* SubsHub Store Engine — front-end styles.
   Scoped under .sse- prefixes so nothing here can leak into theme or checkout CSS. */

:root {
  --sse-ink: #161a10;
  --sse-blue: #1d3fb8;
  --sse-line: #e4e6ea;
  --sse-muted: #5b6270;
  --sse-bg-soft: #f6f7f9;
  --sse-radius: 10px;
}

/* ------------------------------------------------------------------ badges */
/* Reserved inline so injecting it cannot shift the title block. */
.sse-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sse-bg-soft);
  color: var(--sse-muted);
  border: 1px solid var(--sse-line);
  margin: 4px 0 0;
}
.sse-badge--private-account,
.sse-badge--private-profile { background: #eef2ff; color: var(--sse-blue); border-color: #cdd8fb; }
.sse-badge--licence-key { background: #fff7e6; color: #8a5a00; border-color: #f2dcae; }

/* ------------------------------------------------------------- spec table */
.sse-specs { margin: 20px 0; }
.sse-specs__h { font-size: 15px; margin: 0 0 8px; }
.sse-specs__t { width: 100%; border-collapse: collapse; font-size: 14px; }
.sse-specs__t th,
.sse-specs__t td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--sse-line); vertical-align: top; }
.sse-specs__t th { width: 44%; color: var(--sse-muted); font-weight: 500; }
.sse-specs__t td { color: var(--sse-ink); font-weight: 600; }

/* ------------------------------------------------- official price comparison */
.sse-vs-official {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--sse-line);
  border-left: 3px solid var(--sse-blue);
  border-radius: var(--sse-radius);
  background: var(--sse-bg-soft);
}
.sse-vs-official__line { margin: 0 0 4px; font-size: 14px; line-height: 1.5; }
.sse-vs-official__src { margin: 0; font-size: 12px; color: var(--sse-muted); line-height: 1.5; }

/* ----------------------------------------------------------------- filters */
.sse-filters { margin: 0 0 18px; }
.sse-filters__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sse-filters__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--sse-line); border-radius: var(--sse-radius);
  background: #fff; color: var(--sse-ink); font-weight: 600; font-size: 14px; cursor: pointer;
}
.sse-filters__badge {
  background: var(--sse-blue); color: #fff; border-radius: 999px;
  font-size: 11px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 5px;
}
.sse-filters__count { font-size: 14px; color: var(--sse-muted); }
.sse-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.sse-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; min-height: 32px;
  border: 1px solid #cdd8fb; background: #eef2ff; color: var(--sse-blue);
  border-radius: 999px; font-size: 13px; text-decoration: none;
}
.sse-filter-chip:hover { background: #e2e9ff; }
.sse-clear-filters { font-size: 13px; color: var(--sse-muted); text-decoration: underline; align-self: center; }

.sse-filters__panel { display: none; margin-top: 14px; }
.sse-filters.is-open .sse-filters__panel { display: block; }
/* Platform alone has 30+ options. Left unbounded the open panel ran several
   screens tall on mobile and pushed the product grid out of reach, so the
   options scroll inside the panel and the apply button stays pinned. */
@media (max-width: 899px) {
  .sse-filters.is-open .sse-filters__panel {
    max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--sse-line); border-radius: var(--sse-radius);
    padding: 14px; position: relative;
  }
  .sse-filter__opts { max-height: 232px; overflow-y: auto; }
  .sse-filter__actions {
    position: sticky; bottom: -14px; background: #fff;
    padding: 10px 0 2px; margin: 0 -2px; border-top: 1px solid var(--sse-line);
  }
}
.sse-filter { border: 0; padding: 0; margin: 0 0 16px; }
.sse-filter legend { font-weight: 700; font-size: 13px; margin-bottom: 8px; padding: 0; }
.sse-filter__opts { display: grid; grid-template-columns: 1fr; gap: 2px; }
.sse-filter__opt {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 4px; font-size: 14px; cursor: pointer;
}
.sse-filter__opt input { width: 18px; height: 18px; flex: none; }
.sse-filter__opt span { flex: 1; }
.sse-filter__opt em { color: var(--sse-muted); font-style: normal; font-size: 12px; }
.sse-filter__actions { display: flex; gap: 12px; align-items: center; }
.sse-filter__apply {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--sse-radius);
  background: var(--sse-blue); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
}
@media (min-width: 900px) {
  .sse-filters__toggle { display: none; }
  .sse-filters__panel { display: block; }
  .sse-filter__opts { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

.sse-search-note { font-size: 14px; color: var(--sse-muted); margin: 0 0 12px; }

/* ------------------------------------------------------------ autocomplete */
.sse-ac {
  position: absolute; z-index: 999; left: 0; right: 0; top: 100%;
  background: #fff; border: 1px solid var(--sse-line); border-radius: var(--sse-radius);
  box-shadow: 0 12px 32px rgba(20, 24, 34, .14);
  max-height: 70vh; overflow-y: auto; margin-top: 6px;
}
.sse-ac__note { padding: 8px 12px; font-size: 12px; color: var(--sse-muted); border-bottom: 1px solid var(--sse-line); }
.sse-ac__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; text-decoration: none; color: var(--sse-ink);
  border-bottom: 1px solid var(--sse-line); min-height: 60px;
}
.sse-ac__item:last-of-type { border-bottom: 0; }
.sse-ac__item.is-active, .sse-ac__item:hover { background: var(--sse-bg-soft); }
.sse-ac__img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; flex: none; background: #fff; }
.sse-ac__body { flex: 1; min-width: 0; }
.sse-ac__name { display: block; font-weight: 600; font-size: 14px; }
.sse-ac__meta { display: block; font-size: 12px; color: var(--sse-muted); }
.sse-ac__price { font-weight: 700; font-size: 13px; white-space: nowrap; }
.sse-ac__all { display: block; padding: 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--sse-blue); text-decoration: none; }
.sse-ac__empty { padding: 16px 14px; font-size: 14px; }
.sse-ac__empty p { margin: 0 0 8px; }
.sse-ac__hint { color: var(--sse-muted); font-size: 13px; }
.sse-ac__try {
  border: 1px solid var(--sse-line); background: #fff; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--sse-blue);
}

/* --------------------------------------------------------------- comparison */
/* The compare control is injected by JS after paint. If it were added to normal
   flow it would push every card down and register as layout shift — it measured
   CLS 0.142 on the homepage, well into Google's "poor" band. The space is
   therefore reserved in CSS before first paint and the control is positioned
   into it, so injecting it moves nothing. */
.sh-card, li.product { position: relative; padding-bottom: 42px; }
.sse-compare-toggle {
  position: absolute; left: 12px; bottom: 2px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--sse-muted); cursor: pointer;
  min-height: 40px; margin-top: 0; padding: 0 6px 0 2px;
  border-radius: 8px; -webkit-tap-highlight-color: rgba(29, 63, 184, .12);
}
.sse-compare-toggle:active { background: var(--sse-bg-soft); }
.sse-compare-toggle input { width: 20px; height: 20px; flex: none; }

.sse-cmp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 998;
  background: #fff; border-top: 1px solid var(--sse-line);
  box-shadow: 0 -6px 22px rgba(20, 24, 34, .12);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sse-cmp-bar__list { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
.sse-cmp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--sse-line); background: var(--sse-bg-soft);
  border-radius: 999px; padding: 5px 10px; font-size: 12px; cursor: pointer; max-width: 190px;
}
.sse-cmp-chip span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sse-cmp-bar__actions { display: flex; gap: 10px; align-items: center; }
.sse-cmp-bar__clear { background: none; border: 0; color: var(--sse-muted); font-size: 13px; cursor: pointer; min-height: 44px; }
.sse-compare-open {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--sse-radius);
  background: var(--sse-blue); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
}

.sse-cmp-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(18, 22, 30, .55); display: flex; align-items: flex-end; }
.sse-cmp-modal__inner { background: #fff; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; }
.sse-cmp-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--sse-line); }
.sse-cmp-modal__head h2 { margin: 0; font-size: 17px; }
.sse-cmp-modal__close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; color: var(--sse-muted); }
.sse-cmp-modal__body { overflow: auto; padding: 8px 0 20px; }
@media (min-width: 780px) {
  .sse-cmp-modal { align-items: center; justify-content: center; padding: 24px; }
  .sse-cmp-modal__inner { max-width: 900px; border-radius: 14px; }
}

.sse-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sse-cmp-table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 13px; }
.sse-cmp-table th, .sse-cmp-table td { padding: 10px; border-bottom: 1px solid var(--sse-line); text-align: left; vertical-align: top; }
.sse-cmp-table thead th { border-bottom: 2px solid var(--sse-line); }
.sse-cmp-table thead a { text-decoration: none; color: var(--sse-ink); display: block; }
.sse-cmp-table thead img { display: block; width: 56px; height: 56px; object-fit: contain; margin-bottom: 6px; }
.sse-cmp-name { display: block; font-weight: 700; font-size: 13px; line-height: 1.3; }
.sse-cmp-price { display: block; font-size: 12px; color: var(--sse-muted); margin-top: 4px; }
.sse-cmp-lbl {
  position: sticky; left: 0; background: #fff; z-index: 2;
  color: var(--sse-muted); font-weight: 500; min-width: 132px;
  box-shadow: 1px 0 0 var(--sse-line);
}
.sse-cmp-na { color: #9aa1ad; font-style: italic; }
.sse-cmp-cta {
  display: inline-block; min-height: 40px; line-height: 40px; padding: 0 14px;
  background: var(--sse-blue); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13px;
}
.sse-cmp-embed { margin: 24px 0; }
.sse-cmp-embed h3 { font-size: 16px; margin: 0 0 10px; }

/* -------------------------------------------------------- empty / error UX */
.sse-empty { text-align: center; padding: 36px 18px; }
.sse-empty h2 { font-size: 18px; margin: 0 0 8px; }
.sse-empty p { color: var(--sse-muted); margin: 0 0 16px; font-size: 14px; }
.sse-empty__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sse-empty__chips a {
  border: 1px solid var(--sse-line); border-radius: 999px; padding: 8px 14px;
  text-decoration: none; color: var(--sse-ink); font-size: 13px; min-height: 40px; display: inline-flex; align-items: center;
}

/* ------------------------------------------------------ sticky mobile CTA */
.sse-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 997;
  background: #fff; border-top: 1px solid var(--sse-line);
  box-shadow: 0 -6px 18px rgba(20, 24, 34, .1);
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px;
}
.sse-buybar__info { flex: 1; min-width: 0; }
.sse-buybar__price { display: block; font-weight: 700; font-size: 16px; line-height: 1.2; }
.sse-buybar__plan { display: block; font-size: 12px; color: var(--sse-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sse-buybar__cta {
  min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--sse-radius);
  background: var(--sse-blue); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap;
}
@media (max-width: 899px) {
  body.single-product.sse-buybar-on .sse-buybar { display: flex; }
  /* Keep the comparison bar and the buy bar from stacking on top of each other. */
  body.single-product .sse-cmp-bar { bottom: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* The theme's card badge was driven by is_on_sale() and announced a discount
   against a "was" price that was never charged. With the fictional anchors gone
   there is nothing to announce, so the badge is hidden rather than left as an
   orphan lightning bolt on all 43 cards. */
.sh-badge-instant { display: none !important; }

/* ---------------------------------------------------------- card pricing
   The theme renders card prices through subhub_card_price_html(), which is a
   plain unfilterable function, so the woocommerce_get_price_html filter that
   removed the fictional "was" price on product pages never reached the cards.
   The anchor is its own span, not a <del>, which is why it survived. Hidden
   here so the price framing is consistent everywhere. */
.sh-card__was { display: none !important; }

/* "/mo" is appended to every card price including one-time licence keys.
   Hidden per product by ui.js, which knows which products are one-time. */
.sh-card.sse-onetime .sh-card__per { display: none !important; }