/**
 * Copyright (c) Guiltek. All rights reserved.
 *
 * This file is part of the kp_search module for PrestaShop.
 * It is licensed under the Guiltek proprietary license provided in LICENSE.md.
 * Copying, redistributing or reselling this file is prohibited.
 */

/**
 * kp_search — search widget and suggestion panel (views/templates/widget/searchbar.tpl,
 * views/js/dom-helpers.js).
 *
 * Every colour, radius and shadow is a --kps-* variable set on the theme's
 * Bootstrap 5 variables (Hummingbird 2.x), with a value of its own for the
 * themes without them (Classic). A theme restyles the widget by setting the
 * --kps-* variables, or overrides the template.
 */
:root {
  --kps-accent: var(--bs-primary, #0b69f6);
  --kps-accent-hover: var(--bs-primary-text-emphasis, #0848a6);
  --kps-accent-soft: var(--bs-primary-bg-subtle, #e7f0fe);
  --kps-on-accent: #fff;
  --kps-bg: var(--bs-body-bg, #fff);
  --kps-bg-muted: var(--bs-tertiary-bg, #f8f9fa);
  --kps-text: var(--bs-emphasis-color, #000);
  --kps-text-soft: var(--bs-body-color, #212529);
  --kps-text-muted: var(--bs-secondary-color, #6c757d);
  --kps-border: var(--bs-border-color, #dee2e6);
  --kps-field-border: var(--bs-border-color, #ced4da);
  --kps-success: var(--bs-success, #198754);
  --kps-success-soft: var(--bs-success-bg-subtle, #d1e7dd);
  --kps-warning: var(--bs-warning-text-emphasis, #997404);
  --kps-warning-soft: var(--bs-warning-bg-subtle, #fff3cd);
  --kps-danger: var(--bs-danger, #dc3545);
  --kps-radius: var(--bs-border-radius, .375rem);
  --kps-radius-lg: var(--bs-border-radius-lg, .5rem);
  --kps-shadow: var(--bs-box-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, .175));
  --kps-focus-ring: 0 0 0 .25rem var(--bs-focus-ring-color, rgba(13, 110, 253, .25));
  --kps-font: inherit;
  --kps-field-height: 2.75rem;
  --kps-z: 1040;
}

.kps-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kps-visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.kps-locked, .kps-locked body { overflow: hidden; }

/* ─── Field ─────────────────────────────────────────────── */
.kps-desktop, .kps-widget { position: relative; width: 100%; font-family: var(--kps-font); }
.kps-form { margin: 0; }
.kps-field {
  display: flex; align-items: stretch; height: var(--kps-field-height);
  background: var(--kps-bg); border: 1px solid var(--kps-field-border); border-radius: var(--kps-radius);
}
.kps-field:focus-within { border-color: var(--kps-accent); box-shadow: var(--kps-focus-ring); }
.kps-field__icon { align-self: center; margin: 0 .5rem 0 .75rem; color: var(--kps-text-muted); }
.kps-input {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--kps-text); font: inherit; font-size: 1rem;
}
.kps-input:focus { outline: none; box-shadow: none; }
.kps-input::placeholder { color: var(--kps-text-muted); }
.kps-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.kps-clear {
  display: grid; place-items: center; width: 2.5rem; padding: 0; border: 0; background: none; color: var(--kps-text-muted); cursor: pointer;
}
.kps-clear[hidden] { display: none; }
.kps-submit {
  display: inline-flex; align-items: center; gap: .5rem; margin: 3px; padding: 0 1rem; border: 0;
  border-radius: calc(var(--kps-radius) - 2px); background: var(--kps-accent); color: var(--kps-on-accent); font: inherit; font-weight: 700; cursor: pointer;
}
.kps-submit:hover { background: var(--kps-accent-hover); }
.kps-submit__label { display: none; }
@media (min-width: 992px) { .kps-submit__label { display: inline; } }

/* ─── Panel ─────────────────────────────────────────────── */
.kps-panel {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: var(--kps-z);
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem; width: min(56rem, calc(100vw - 2rem));
  max-height: calc(100vh - 10rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--kps-bg); border: 1px solid var(--kps-border); border-radius: var(--kps-radius-lg); box-shadow: var(--kps-shadow);
  color: var(--kps-text-soft); font-size: .875rem; line-height: 1.25rem; text-align: left;
}
.kps-panel[hidden] { display: none; }
.kps-panel--single { grid-template-columns: minmax(0, 1fr); width: min(40rem, calc(100vw - 2rem)); }
.kps-panel[aria-busy="true"] { opacity: .7; }
.kps-panel__main, .kps-panel__side { display: grid; align-content: start; gap: 1rem; min-width: 0; padding: 1rem; }
.kps-panel__side { background: var(--kps-bg-muted); border-left: 1px solid var(--kps-border); }
.kps-panel > .kps-error, .kps-panel > .kps-no-results { padding: 1rem; }

.kps-group { display: grid; gap: .25rem; }
.kps-group__label {
  display: flex; justify-content: space-between; gap: .5rem; margin: 0 0 .25rem;
  color: var(--kps-text-muted); font-size: .8125rem; font-weight: 700;
}
.kps-count { font-weight: 500; }

.kps-row, .kps-exact, .kps-link, .kps-all { color: inherit; text-decoration: none; }
.kps-row:hover, .kps-row:focus, .kps-exact:hover, .kps-link:hover, .kps-all:hover { color: var(--kps-text); text-decoration: none; }
.kps-row {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  margin: 0 -.5rem; padding: .5rem; border-radius: var(--kps-radius);
}
.kps-row:not(:has(.kps-row__thumb)) { grid-template-columns: minmax(0, 1fr) auto; }
.kps-row:hover, .kps-row[aria-selected="true"], .kps-link:hover, .kps-link[aria-selected="true"],
.kps-all:hover, .kps-all[aria-selected="true"] { background: var(--kps-accent-soft); }
.kps-row__thumb {
  display: grid; place-items: center; width: 3rem; height: 3rem; overflow: hidden;
  background: var(--kps-bg); border: 1px solid var(--kps-border); border-radius: calc(var(--kps-radius) - 2px); color: var(--kps-text-muted);
}
.kps-row__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kps-row__body { min-width: 0; }
.kps-row__name {
  display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  color: var(--kps-text-soft); font-weight: 500;
}
.kps-row__name b { color: var(--kps-text); font-weight: 800; }
.kps-row__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .625rem; margin-top: .125rem; font-size: .8125rem; }
.kps-ref { color: var(--kps-text-muted); }
.kps-ref b { color: var(--kps-text); }
.kps-price { color: var(--kps-text); font-weight: 800; white-space: nowrap; text-align: right; }
.kps-price small { color: var(--kps-text-muted); font-size: .75rem; font-weight: 600; }
.kps-stock { color: var(--kps-text-muted); font-weight: 600; }
.kps-stock--in_stock { color: var(--kps-success); }
.kps-stock--last_remaining_items, .kps-stock--available { color: var(--kps-warning); }

.kps-exact {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .75rem;
  background: var(--kps-success-soft); border: 1px solid var(--kps-success); border-radius: var(--kps-radius);
}
.kps-exact:not(:has(.kps-row__thumb)) { grid-template-columns: minmax(0, 1fr) auto; }
.kps-exact[aria-selected="true"] { box-shadow: var(--kps-focus-ring); }
.kps-exact .kps-row__thumb { width: 3.5rem; height: 3.5rem; }
.kps-exact .kps-stock { display: block; margin-top: .25rem; }
.kps-badge {
  display: inline-flex; align-items: center; gap: .25rem; padding: 0 .5rem; border-radius: 1rem;
  background: var(--kps-success); color: var(--kps-on-accent); font-size: .75rem; font-weight: 700;
}
.kps-exact-actions { display: flex; gap: .625rem; margin: .5rem 0 0; }
.kps-btn {
  display: inline-flex; flex: none; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; padding: 0 1rem;
  border: 1px solid transparent; border-radius: var(--kps-radius); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.kps-btn--primary { flex: 1; background: var(--kps-accent); color: var(--kps-on-accent); }
.kps-btn--primary:hover { background: var(--kps-accent-hover); color: var(--kps-on-accent); }
.kps-btn--secondary { background: var(--kps-bg); border-color: var(--kps-field-border); color: var(--kps-text); }

.kps-link { display: flex; justify-content: space-between; gap: .5rem; margin: 0 -.5rem; padding: .4375rem .5rem; border-radius: var(--kps-radius); }
.kps-link > span:last-child { color: var(--kps-text-muted); font-size: .8125rem; }
.kps-link small { display: block; color: var(--kps-text-muted); font-size: .75rem; line-height: 1rem; }
.kps-link b { color: var(--kps-text); font-weight: 800; }
.kps-ask { color: var(--kps-accent); font-weight: 700; }
.kps-ask[aria-disabled="true"] { opacity: .6; pointer-events: none; }

.kps-dym, .kps-no-results, .kps-error, .kps-hint { margin: 0; }
.kps-dym { padding: .625rem .75rem; background: var(--kps-warning-soft); border-radius: var(--kps-radius); }
.kps-dym a, .kps-no-results a { color: var(--kps-accent); font-weight: 700; }
.kps-error { color: var(--kps-danger); }
.kps-hint { color: var(--kps-text-muted); font-size: .75rem; line-height: 1rem; }

.kps-answer { padding: .75rem; background: var(--kps-bg-muted); border: 1px solid var(--kps-border); border-radius: var(--kps-radius); }
.kps-answer__label { margin: 0; color: var(--kps-text-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.kps-answer__text { margin: 0 0 .25rem; color: var(--kps-text); white-space: pre-line; }

.kps-recent-item { display: flex; align-items: center; gap: .25rem; }
.kps-recent-item .kps-link { flex: 1; min-width: 0; margin-right: 0; }
.kps-recent-delete {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--kps-radius);
  background: none; color: var(--kps-text-muted); cursor: pointer;
}
.kps-recent-delete:hover { background: var(--kps-accent-soft); color: var(--kps-text); }

.kps-all {
  display: flex; grid-column: 1 / -1; align-items: center; justify-content: center; min-height: 2.75rem;
  border-top: 1px solid var(--kps-border); color: var(--kps-accent); font-weight: 700;
}

/* ─── Full-screen view, under 768 px ────────────────────── */
.kps-mobile { display: none; }
.kps-mobile__toggle {
  display: inline-flex; align-items: center; justify-content: center; width: var(--kps-field-height); height: var(--kps-field-height);
  padding: 0; border: 0; border-radius: var(--kps-radius); background: none; color: inherit; cursor: pointer;
}
.kps-mobile__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.kps-overlay {
  position: fixed; inset: 0; z-index: calc(var(--kps-z) + 10); overflow-y: auto; overscroll-behavior: contain;
  background: var(--kps-bg); color: var(--kps-text-soft);
}
.kps-overlay[hidden] { display: none; }
.kps-overlay__bar { display: flex; align-items: flex-start; gap: .375rem; padding: .625rem 1rem .625rem .375rem; }
.kps-overlay__close {
  display: grid; flex: none; place-items: center; width: var(--kps-field-height); height: var(--kps-field-height);
  padding: 0; border: 0; border-radius: var(--kps-radius); background: none; color: var(--kps-text); cursor: pointer;
}
.kps-overlay__slot { flex: 1; min-width: 0; }
.kps-overlay .kps-submit { display: none; }
.kps-overlay .kps-panel {
  position: static; display: flex; flex-direction: column; gap: 1.125rem; width: auto; max-width: none !important; max-height: none;
  margin: .75rem -1rem 0 calc(-1 * (var(--kps-field-height) + .375rem)); padding: 1rem; overflow: visible;
  border: 0; border-top: 1px solid var(--kps-border); border-radius: 0; box-shadow: none;
}
.kps-overlay .kps-row { grid-template-columns: 3.5rem minmax(0, 1fr); }
.kps-overlay .kps-row__thumb { width: 3.5rem; height: 3.5rem; }
.kps-overlay .kps-price { text-align: left; }
.kps-overlay .kps-all {
  min-height: var(--kps-field-height); border: 1px solid var(--kps-field-border); border-radius: var(--kps-radius); color: var(--kps-text);
}

@media (max-width: 767.98px) {
  .kps-desktop { display: none; }
  .kps-mobile { display: block; }
}