/**
 * @package     J2Commerce
 * @subpackage  mod_j2commerce_findbar
 *
 * @copyright   (C)2024-2026 J2Commerce, LLC <https://www.j2commerce.com>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

.j2c-findbar {
  position: relative;
  display: block;
  font-size: 0.95rem;
}

.j2c-findbar__field {
  position: relative;
  display: flex;
  align-items: center;
}

.j2c-findbar__input {
  width: 100%;
  padding-right: 2.5rem;
}

.j2c-findbar__icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color, #6c757d);
  pointer-events: none;
  z-index: 2;
}

/* Clear "X" button — sits on top of the search icon when visible */
.j2c-findbar__clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-danger, #dc3545);
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bs-body-bg, #fff);
}
.j2c-findbar__clear:hover,
.j2c-findbar__clear:focus-visible {
  background: var(--bs-danger, #dc3545);
  color: #fff;
  box-shadow: 0 0 0 2px var(--bs-danger, #dc3545);
}
.j2c-findbar__clear:focus-visible {
  outline: 3px solid var(--bs-focus-ring-color, #0d6efd);
  outline-offset: 2px;
}
/* Show the clear button when the sibling input is non-empty (class toggled by JS) */
.j2c-findbar__field.has-value .j2c-findbar__clear {
  display: flex;
}
.j2c-findbar__field.has-value .j2c-findbar__icon {
  display: none;
}
/* Suppress the native browser clear control on search inputs */
.j2c-findbar__input::-webkit-search-cancel-button {
  display: none;
}
.j2c-findbar__input::-ms-clear {
  display: none;
}

.j2c-findbar__panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  max-height: 28rem;
  overflow-y: auto;
}

.j2c-findbar__results,
.j2c-findbar__empty,
.j2c-findbar__status {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

.j2c-findbar__item {
  display: block;
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.05));
}
.j2c-findbar__item:last-child { border-bottom: 0; }

.j2c-findbar__item > a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  color: inherit;
  text-decoration: none;
}
.j2c-findbar__item > a:hover,
.j2c-findbar__item.is-active > a,
.j2c-findbar__item[aria-selected="true"] > a {
  background: var(--bs-tertiary-bg, #f8f9fa);
  text-decoration: none;
}

.j2c-findbar__thumb-wrap {
  flex-shrink: 0;
  width: var(--j2c-findbar-img-width, 64px);
  aspect-ratio: var(--j2c-findbar-aspect, 1 / 1);
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-radius: 0.25rem;
  overflow: hidden;
}
.j2c-findbar__thumb-wrap--crop .j2c-findbar__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.j2c-findbar__thumb-wrap--contain .j2c-findbar__thumb { width: 100%; height: 100%; object-fit: contain; display: block; }

.j2c-findbar__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.j2c-findbar__title { font-weight: 600; }
/* Server-side term highlighting uses <mark> */
.j2c-findbar__title mark {
  background: var(--bs-warning-bg-subtle, #fff3cd);
  color: inherit;
  padding: 0;
  font-weight: 700;
  border-radius: 0.1em;
}

.j2c-findbar__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-body-color, #212529);
  border-radius: 0.2rem;
}

.j2c-findbar__meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color, #6c757d);
}

.j2c-findbar__price { font-weight: 600; color: var(--bs-body-color, #212529); }
.j2c-findbar__stock--in_stock { color: var(--bs-success, #198754); }
.j2c-findbar__stock--out_of_stock { color: var(--bs-danger, #dc3545); }

.j2c-findbar__desc {
  margin: 0;
  font-size: 0.85rem;
  color: var(--bs-secondary-color, #6c757d);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.j2c-findbar__date,
.j2c-findbar__url {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* Variant A: list — default */
.j2c-findbar--list .j2c-findbar__results { display: block; }

/* Variant B: grid */
.j2c-findbar--grid .j2c-findbar__panel { max-width: 56rem; }
.j2c-findbar__grid {
  display: grid;
  /* Match the storefront category card width (~280px) so findbar grid cards
     look identical to the /category list, not shrunken. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  padding: 0.75rem;
}
.j2c-findbar__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  overflow: hidden;
}
.j2c-findbar__card:hover { box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08); }
.j2c-findbar__card-media {
  position: relative;
  aspect-ratio: var(--j2c-findbar-aspect, 1 / 1);
  background: var(--bs-tertiary-bg, #f8f9fa);
}
.j2c-findbar__card-media .j2c-findbar__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.j2c-findbar__card-media .j2c-findbar__placeholder { display: block; width: 100%; height: 100%; background: var(--bs-tertiary-bg, #f8f9fa); }
.j2c-findbar__card-media .j2c-findbar__badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
}
.j2c-findbar__card-body { padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.j2c-findbar__card-title { font-weight: 600; }

/* Variant C: mega */
.j2c-findbar--mega .j2c-findbar__panel { max-width: 64rem; }
.j2c-findbar__mega {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0;
  min-height: 8rem;
}
.j2c-findbar__rail {
  padding: 0.75rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-right: 1px solid var(--bs-border-color, #dee2e6);
}
.j2c-findbar__rail-title {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color, #6c757d);
}
.j2c-findbar__rail-list { list-style: none; margin: 0; padding: 0; }
.j2c-findbar__rail-item {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.05));
}
.j2c-findbar__rail-item:last-child { border-bottom: 0; }
.j2c-findbar__rail-count { color: var(--bs-secondary-color, #6c757d); }
.j2c-findbar__mega-results { padding: 0.25rem 0.5rem; max-height: 24rem; overflow-y: auto; }

@media (max-width: 575.98px) {
  .j2c-findbar__mega { grid-template-columns: 1fr; }
  .j2c-findbar__rail { border-right: 0; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
}

/* Grid layout — wrapper li that holds the .j2c-findbar__grid */
.j2c-findbar__grid-wrapper { list-style: none; padding: 0; margin: 0; }

/* Grid card items */
.j2c-findbar__card-item { list-style: none; }
.j2c-findbar__card-item:focus-visible {
  outline: 3px solid var(--bs-focus-ring-color, #0d6efd);
  outline-offset: 2px;
}

/* Mega layout — wrapper */
.j2c-findbar__mega-wrapper { list-style: none; padding: 0; margin: 0; }
/* Mega results: items may be <div role="option"> (not <li>) */
.j2c-findbar__mega-results .j2c-findbar__item { display: block; border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.05)); }
.j2c-findbar__mega-results .j2c-findbar__item:last-child { border-bottom: 0; }
/* Ensure mega results items are accessible at touch target size */
.j2c-findbar__mega-results .j2c-findbar__item > a,
.j2c-findbar__mega-results .j2c-findbar__item > .j2c-findbar__link { min-height: 44px; }

/* Variant D: compact */
.j2c-findbar--compact .j2c-findbar__results { display: block; }
.j2c-findbar__item--compact .j2c-findbar__compact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.j2c-findbar__item--compact .j2c-findbar__compact-link:hover { background: var(--bs-tertiary-bg, #f8f9fa); }

/* Status */
.j2c-findbar__status {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color, #6c757d);
}
.j2c-findbar__status--error { color: var(--bs-danger, #dc3545); }

/* Trigger button */
.j2c-findbar__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Touch-friendly minimum target size (WCAG 2.5.8) */
  min-height: 44px;
  min-width: 44px;
}

/* Visible focus states — WCAG 2.4.7 / 2.4.11 */
.j2c-findbar__input:focus-visible {
  outline: 3px solid var(--bs-focus-ring-color, #0d6efd);
  outline-offset: 2px;
}
.j2c-findbar__item.is-active > a,
.j2c-findbar__item[aria-selected="true"] > a,
.j2c-findbar__link:focus-visible,
.j2c-findbar__showall-btn:focus-visible,
.j2c-findbar__page-prev:focus-visible,
.j2c-findbar__page-next:focus-visible,
.j2c-findbar__fullpanel-close:focus-visible,
.j2c-findbar__modal-close:focus-visible {
  outline: 3px solid var(--bs-focus-ring-color, #0d6efd);
  outline-offset: 2px;
}

/* Touch-friendly item targets */
.j2c-findbar__item > a {
  min-height: 44px;
}
.j2c-findbar__page-prev,
.j2c-findbar__page-next {
  min-width: 44px;
  min-height: 44px;
}

/* "Show all results" footer — sits below the listbox, NOT inside it (M-5). */
.j2c-findbar__showall-footer {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.j2c-findbar__showall-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-primary, #0d6efd);
  background: transparent;
  border: 0;
  cursor: pointer;
  /* Touch-friendly minimum target size (WCAG 2.5.8) */
  min-height: 44px;
}
.j2c-findbar__showall-btn:hover { text-decoration: underline; }

/* Full-results panel */
.j2c-findbar__fullpanel {
  margin-top: 0.5rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
}
.j2c-findbar__fullitem {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.05));
}
.j2c-findbar__fullitem:last-child { border-bottom: 0; }
.j2c-findbar__fullitem--loading,
.j2c-findbar__fullitem--empty {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.9rem;
}
.j2c-findbar__fullitem--error { color: var(--bs-danger, #dc3545); }
.j2c-findbar__fulllink {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.j2c-findbar__fulllink:hover { text-decoration: underline; }
.j2c-findbar__fullthumb {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* Modal */
.j2c-findbar-modal-open { overflow: hidden; }
.j2c-findbar__modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 1rem;
}
.j2c-findbar__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.j2c-findbar__modal-dialog {
  position: relative;
  background: var(--bs-body-bg, #fff);
  border-radius: 0.5rem;
  width: 100%;
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18);
}
.j2c-findbar__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.j2c-findbar__modal-title { margin: 0; }
.j2c-findbar__modal-body { padding: 1rem; }
.j2c-findbar__panel--modal {
  position: static;
  border: 0;
  box-shadow: none;
  max-height: 60vh;
}
.j2c-findbar-modal-open .j2c-findbar__panel { box-shadow: none; }

/* Mobile responsive */
@media (max-width: 575.98px) {
  .j2c-findbar__modal { padding: 1rem 0.5rem 0.5rem; }
  .j2c-findbar__modal-dialog { max-width: 100%; }
  .j2c-findbar__fullpanel { margin-top: 0.25rem; }
}

/* Offcanvas launcher — trigger button */
.j2c-findbar__launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

/* Auto-height: offcanvas hugs the current page of results (paging bounds the size,
   so it never needs an internal scroll). 90vh is only a safety cap. The 3-class
   selector out-ranks the template's `.offcanvas.offcanvas-top { height:var(--offcanvas-height) }`.
   bottom:auto is CRITICAL — templates pin `.offcanvas { bottom:0 }`, and a fixed element
   with top:0 AND bottom:0 is forced to full height regardless of height:auto. Releasing
   bottom lets it size from the top to fit content (then max-height caps + body scrolls). */
.offcanvas.offcanvas-top.j2c-findbar-offcanvas {
  --bs-offcanvas-height: auto;
  --offcanvas-height: auto;
  height: auto;
  max-height: 90vh;
  bottom: auto;
}
.j2c-findbar-offcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto; /* engages only if the 90vh safety cap is ever reached */
}
/* Panel flows at its natural content height (no flex-grow) so the auto-height
   offcanvas hugs the results exactly instead of stretching to the 90vh cap. */
.j2c-findbar-offcanvas .j2c-findbar__panel {
  position: static;
  border: 0;
  box-shadow: none;
  max-height: none;
  overflow-y: visible;
  flex: 0 0 auto;
}

/* Pager is a fixed toolbar ABOVE the results — separator sits below it. */
.j2c-findbar__inline-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,0.15));
  margin-bottom: 0.5rem;
}
.j2c-findbar__inline-pager[hidden] { display: none; }
.j2c-findbar__inline-page-info { white-space: nowrap; }

/* Native uk-offcanvas (right). UIkit owns positioning, animation and backdrop;
   we only widen the bar so product results have room and let the search panel
   flow inside it (the bar is the single scroll container). */
.j2c-findbar__uk-offcanvas .uk-offcanvas-bar {
  width: 360px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.j2c-findbar__uk-offcanvas .uk-offcanvas-bar .j2c-findbar__panel {
  position: static;
  border: 0;
  box-shadow: none;
  max-height: none;
  overflow-y: visible;
}

/* UIkit overrides — applied when .j2c-findbar--uikit is present */
.j2c-findbar--uikit .j2c-findbar__panel {
  background: var(--uk-navbar-dropdown-background, #fff);
  border-color: var(--uk-border-color, rgba(0,0,0,0.2));
}
.j2c-findbar--uikit .j2c-findbar__item > a:hover,
.j2c-findbar--uikit .j2c-findbar__item[aria-selected="true"] > a {
  background: var(--uk-navbar-dropdown-hover-background, #f8f9fa);
}
.j2c-findbar--uikit .j2c-findbar__showall-footer {
  border-top-color: var(--uk-border-color, rgba(0,0,0,0.2));
}
.j2c-findbar--uikit .j2c-findbar__showall-btn {
  color: var(--uk-link-color, #1e87f0);
}
.j2c-findbar--uikit .j2c-findbar__item--compact .j2c-findbar__compact-link:hover {
  background: var(--uk-navbar-dropdown-hover-background, #f8f9fa);
}

/* =========================================================================
   Grid card — cart form and product options layout
   Scoped to .j2c-findbar so these overrides only affect findbar grid cards.
   The shared product-item layout renders full-width inside the card column;
   these rules tighten spacing and ensure the cart button fills the card
   footer without overflowing the narrow column.
   ======================================================================= */

/* Product item card fills the column fully */
.j2c-findbar .j2commerce-product-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Push cart area to the bottom of the card */
.j2c-findbar .j2commerce-product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Cart form sits at the bottom */
.j2c-findbar .j2commerce-addtocart-form {
  margin-top: auto;
  padding: 0.5rem 0 0;
}

/* Card internals (cart button, qty, options, stock, notices) intentionally carry
   NO findbar overrides — they inherit the native com_j2commerce product-item
   styling so the grid cards look identical to the storefront category list. */

/* Redirect mode — plain search form, no AJAX */
.j2c-findbar__redirect-form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.j2c-findbar__redirect-form .j2c-findbar__field {
  flex: 1 1 auto;
  min-width: 0;
}

.j2c-findbar__redirect-submit {
  flex-shrink: 0;
}