/* template_search.css — Reusable template search component.
 *
 * Powers the search bar on /dashboard and /kundangan. Built around an
 * accessible ARIA combobox + listbox with keyboard navigation, recent and
 * popular searches, live suggestions (occasion / style / template name),
 * fuzzy "did you mean" recovery, and a graceful no-results state.
 *
 * Also styles the faceted chip bar (.tmpl-facet-*) used on /kundangan,
 * which previously shipped without any CSS.
 *
 * Design tokens (css/tokens.css) drive every colour/spacing/radius so the
 * component stays consistent with the rest of the storefront.
 */

/* ─── Field shell ─────────────────────────────────────────────── */

.tmpl-search {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.tmpl-search__field {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--kdg-color-surface, #fff);
  border: 2px solid var(--kdg-color-border-subtle, #ecedf0);
  border-radius: var(--kdg-radius-md, 14px);
  padding: .25rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.tmpl-search__field:focus-within {
  border-color: var(--kdg-color-brand-primary, #ff5555);
  box-shadow: 0 0 0 4px rgba(255, 85, 85, .12), 0 2px 8px rgba(0, 0, 0, .06);
}

.tmpl-search__icon {
  color: var(--kdg-color-text-tertiary, #8a8f99);
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-left: .625rem;
}

/* When the spinner is shown (rapid typing) swap the leading glyph. */
.tmpl-search__field.is-busy .tmpl-search__icon { animation: tmpl-search-pulse 1s ease-in-out infinite; }
@keyframes tmpl-search-pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.tmpl-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: var(--kdg-font-size-md, .875rem);
  font-family: var(--kdg-font-family-sans, inherit);
  color: var(--kdg-color-text-primary, #1f2024);
  padding: .75rem 0;
  outline: none;
}
.tmpl-search__input::placeholder { color: var(--kdg-color-text-tertiary, #8a8f99); }

.tmpl-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  margin-right: .25rem;
  border: none;
  background: var(--kdg-color-border-subtle, #ecedf0);
  color: var(--kdg-color-text-secondary, #5b6068);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.tmpl-search__clear i { font-size: .875rem; }
.tmpl-search__clear:hover { background: var(--kdg-color-border-strong, #d9d9de); color: var(--kdg-color-text-primary, #1f2024); }
.tmpl-search__clear:active { transform: scale(.92); }
.tmpl-search__clear[hidden] { display: none; }

.tmpl-search__submit {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  flex-shrink: 0;
  padding: .625rem 1.25rem;
  background: var(--kdg-color-brand-primary, #ff5555);
  color: var(--kdg-color-text-inverse, #fff);
  border: none;
  border-radius: var(--kdg-radius-sm, 10px);
  font-size: var(--kdg-font-size-md, .875rem);
  font-weight: var(--kdg-font-weight-semibold, 600);
  font-family: var(--kdg-font-family-sans, inherit);
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.tmpl-search__submit:hover { background: var(--kdg-color-brand-primary-hover, #ff3d3d); }
.tmpl-search__submit:active { transform: scale(.97); }

/* Variant: a slim, borderless search (for the kundangan gallery toolbar). */
.tmpl-search--slim .tmpl-search__field {
  border-radius: var(--kdg-radius-md, 14px);
  padding: .1875rem;
}
.tmpl-search--block { max-width: none; }

/* ─── Suggestion panel ────────────────────────────────────────── */

.tmpl-search__panel {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--kdg-color-surface, #fff);
  border: 1px solid var(--kdg-color-border-subtle, #ecedf0);
  border-radius: var(--kdg-radius-md, 14px);
  box-shadow: 0 20px 48px -16px rgba(15, 23, 42, .22), 0 2px 0 rgba(15, 23, 42, .04);
  overflow: hidden;
  max-height: min(60vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: tmpl-search-pop .16s cubic-bezier(.2, .7, .2, 1);
}
.tmpl-search__panel[hidden] { display: none; }
@keyframes tmpl-search-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tmpl-search__group { padding: .375rem 0; }
.tmpl-search__group + .tmpl-search__group { border-top: 1px solid var(--kdg-color-border-subtle, #ecedf0); }

.tmpl-search__group-label {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem 1rem .25rem;
  font-size: var(--kdg-font-size-2xs, .6875rem);
  font-weight: var(--kdg-font-weight-semibold, 600);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kdg-color-text-tertiary, #8a8f99);
}

.tmpl-search__option {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .5625rem 1rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: var(--kdg-font-size-md, .875rem);
  color: var(--kdg-color-text-primary, #1f2024);
  font-family: var(--kdg-font-family-sans, inherit);
  text-decoration: none;
  transition: background .1s ease;
}
.tmpl-search__option:hover,
.tmpl-search__option[aria-selected="true"] {
  background: var(--kdg-color-state-neutral-soft, #f1f1f4);
}
.tmpl-search__option i.tmpl-search__option-icon {
  color: var(--kdg-color-text-tertiary, #8a8f99);
  font-size: 1rem;
  flex-shrink: 0;
  width: 1.125rem;
  text-align: center;
}
.tmpl-search__option-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmpl-search__option-meta {
  font-size: var(--kdg-font-size-2xs, .6875rem);
  color: var(--kdg-color-text-tertiary, #8a8f99);
  flex-shrink: 0;
}

/* Highlighted match fragment inside an option. */
.tmpl-search__mark {
  background: rgba(255, 85, 85, .16);
  color: var(--kdg-color-brand-primary, #ff5555);
  border-radius: 3px;
  padding: 0 .0625rem;
  font-weight: var(--kdg-font-weight-semibold, 600);
}

/* A trailing "enter to search for <q>" affordance. */
.tmpl-search__searchall {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1rem;
  font-size: var(--kdg-font-size-sm, .8125rem);
  color: var(--kdg-color-text-secondary, #5b6068);
  border-top: 1px solid var(--kdg-color-border-subtle, #ecedf0);
  cursor: pointer;
  background: transparent;
  width: 100%;
  border-left: none;
  border-right: none;
  border-bottom: none;
  font-family: inherit;
  text-align: left;
}
.tmpl-search__searchall:hover { background: var(--kdg-color-state-neutral-soft, #f1f1f4); }
.tmpl-search__searchall b { color: var(--kdg-color-text-primary, #1f2024); font-weight: var(--kdg-font-weight-semibold, 600); }
.tmpl-search__searchall kbd {
  margin-left: auto;
  font-family: var(--kdg-font-family-mono, ui-monospace, monospace);
  font-size: var(--kdg-font-size-2xs, .6875rem);
  padding: .0625rem .3125rem;
  border: 1px solid var(--kdg-color-border-strong, #d9d9de);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--kdg-color-surface, #fff);
  color: var(--kdg-color-text-secondary, #5b6068);
}

/* Did-you-mean recovery row (unexpected scenario: typo / 0 matches). */
.tmpl-search__dym {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  font-size: var(--kdg-font-size-sm, .8125rem);
  color: var(--kdg-color-text-secondary, #5b6068);
  background: var(--kdg-color-state-warning-soft, #fff4d6);
  border-bottom: 1px solid var(--kdg-color-border-subtle, #ecedf0);
}
.tmpl-search__dym button {
  border: 1px solid var(--kdg-color-state-warning, #b97400);
  background: var(--kdg-color-surface, #fff);
  color: var(--kdg-color-state-warning, #b97400);
  border-radius: 999px;
  padding: .1875rem .625rem;
  font-size: var(--kdg-font-size-sm, .8125rem);
  font-weight: var(--kdg-font-weight-semibold, 600);
  cursor: pointer;
  font-family: inherit;
}
.tmpl-search__dym button:hover { background: var(--kdg-color-state-warning, #b97400); color: #fff; }

/* Panel empty (rare: suggestions dataset empty). */
.tmpl-search__panel-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--kdg-color-text-tertiary, #8a8f99);
  font-size: var(--kdg-font-size-sm, .8125rem);
}

/* Screen-reader-only status (result count announcement). */
.tmpl-search__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── No-results empty state (card grid) ────────────────────────
 * Shown when a query/facet combination yields zero visible cards.
 * Progressive: the host page provides [data-tmpl-empty] markup; the
 * search JS toggles its visibility and injects the query + a clear CTA. */

.tmpl-search-empty { text-align: center; padding: 3rem 1.25rem; color: var(--kdg-color-text-secondary, #5b6068); }
.tmpl-search-empty__icon {
  width: 64px; height: 64px;
  margin: 0 auto .75rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--kdg-color-state-neutral-soft, #f1f1f4);
  color: var(--kdg-color-text-tertiary, #8a8f99);
  font-size: 1.75rem;
}
.tmpl-search-empty h4 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 .25rem;
  color: var(--kdg-color-text-primary, #1f2024);
}
.tmpl-search-empty p { margin: 0 0 1rem; font-size: var(--kdg-font-size-sm, .8125rem); }
.tmpl-search-empty__chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* ─── Kundangan scope/occasion selector ─────────────────────────
 * Lets a buyer switch the occasion the search applies to without leaving
 * the page. Renders as a compact chip rail under the search field. */

.tmpl-scope-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .75rem;
}
.tmpl-scope-rail__label {
  font-size: var(--kdg-font-size-2xs, .6875rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kdg-color-text-tertiary, #8a8f99);
  font-weight: var(--kdg-font-weight-semibold, 600);
  margin-right: .25rem;
}

/* ─── Faceted chip bar (/kundangan style + format deep-links) ───
 * These classes were emitted by component/facet_bar.php but never styled.
 * Mirrors the dashboard .kchip look so both surfaces feel like one product. */

.tmpl-facet-bar { display: flex; flex-direction: column; gap: .625rem; }
.tmpl-facet-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.tmpl-facet-label {
  font-size: var(--kdg-font-size-2xs, .6875rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kdg-color-text-tertiary, #8a8f99);
  font-weight: var(--kdg-font-weight-semibold, 600);
  min-width: 3.5rem;
}
.tmpl-facet-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border: 1px solid var(--kdg-color-border-subtle, #ecedf0);
  background: var(--kdg-color-surface, #fff);
  color: var(--kdg-color-text-secondary, #5b6068);
  border-radius: 999px;
  font-size: var(--kdg-font-size-xs, .75rem);
  font-weight: var(--kdg-font-weight-medium, 500);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease;
}
.tmpl-facet-chip:hover {
  border-color: var(--kdg-color-text-tertiary, #8a8f99);
  color: var(--kdg-color-text-primary, #1f2024);
  transform: translateY(-1px);
}
.tmpl-facet-chip.is-active {
  background: var(--kdg-color-brand-primary-soft, #fff1f1);
  border-color: var(--kdg-color-brand-primary, #ff5555);
  color: var(--kdg-color-brand-primary, #ff5555);
  font-weight: var(--kdg-font-weight-semibold, 600);
}
.tmpl-facet-chip.is-active .tmpl-facet-count {
  background: rgba(255, 85, 85, .14);
  color: var(--kdg-color-brand-primary, #ff5555);
}
.tmpl-facet-count {
  background: var(--kdg-color-state-neutral-soft, #f1f1f4);
  border-radius: 999px;
  padding: 0 .3125rem;
  font-size: var(--kdg-font-size-2xs, .6875rem);
  color: var(--kdg-color-text-tertiary, #8a8f99);
  min-width: 1.125rem;
  text-align: center;
}

.tmpl-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tmpl-active-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3125rem .625rem .3125rem .75rem;
  background: var(--kdg-color-brand-primary-soft, #fff1f1);
  border: 1px solid var(--kdg-color-brand-primary, #ff5555);
  color: var(--kdg-color-brand-primary, #ff5555);
  border-radius: 999px;
  font-size: var(--kdg-font-size-xs, .75rem);
  font-weight: var(--kdg-font-weight-semibold, 600);
  text-decoration: none;
  transition: background .15s ease;
}
.tmpl-active-chip:hover { background: rgba(255, 85, 85, .14); }
.tmpl-active-chip i { font-size: .75rem; }
.tmpl-active-clear {
  font-size: var(--kdg-font-size-xs, .75rem);
  color: var(--kdg-color-text-secondary, #5b6068);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tmpl-active-clear:hover { color: var(--kdg-color-text-primary, #1f2024); }

.tmpl-empty-facet { text-align: center; padding: 3rem 1.25rem; }
.tmpl-empty-facet-icon {
  width: 64px; height: 64px;
  margin: 0 auto .75rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--kdg-color-state-neutral-soft, #f1f1f4);
  color: var(--kdg-color-text-tertiary, #8a8f99);
  font-size: 1.75rem;
}
.tmpl-empty-facet h5 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.375rem;
  font-weight: 400;
  margin: 0 0 .375rem;
  color: var(--kdg-color-text-primary, #1f2024);
}
.tmpl-empty-facet-sub { font-size: var(--kdg-font-size-sm, .8125rem); color: var(--kdg-color-text-secondary, #5b6068); margin: 0 0 1rem; }
.tmpl-empty-facet-back {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: 1rem;
  padding: .5rem 1rem;
  border-radius: var(--kdg-radius-sm, 10px);
  background: var(--kdg-color-text-primary, #1f2024);
  color: var(--kdg-color-text-inverse, #fff);
  text-decoration: none;
  font-size: var(--kdg-font-size-sm, .8125rem);
  font-weight: var(--kdg-font-weight-semibold, 600);
  transition: background .15s ease;
}
.tmpl-empty-facet-back:hover { background: var(--kdg-color-brand-primary, #ff5555); }

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {
  .tmpl-search__submit span { display: none; }
  .tmpl-search__submit { padding: .625rem .875rem; }
  .tmpl-search__panel { max-height: 70vh; }
}

@media (max-width: 480px) {
  .tmpl-search__field { gap: .25rem; padding: .1875rem; }
  .tmpl-search__icon { margin-left: .5rem; font-size: 1.125rem; }
  .tmpl-search__input { font-size: .8125rem; padding: .5625rem 0; }
  .tmpl-facet-label { width: 100%; min-width: 0; margin-bottom: .125rem; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .tmpl-search__panel,
  .tmpl-search__field.is-busy .tmpl-search__icon { animation: none; }
  .tmpl-search__option,
  .tmpl-facet-chip,
  .tmpl-search__clear { transition: none; }
}

/* ─── /kundangan search section layout ────────────────────────── */

.tmpl-ksearch { margin-bottom: 1.25rem; }
.tmpl-ksearch .tmpl-search { max-width: 100%; }
.tmpl-ksearch .tmpl-search__submit span { display: inline; }

/* Ensure the search panel can overlay the gallery tiles without being
 * clipped by a Bootstrap .row's overflow. */
.tmpl-ksearch { position: relative; z-index: 5; }

/* ─── /kundangan gallery grid ─────────────────────────────────
 * Same comfortable rhythm as the dashboard: 3 columns on desktop,
 * 2 on tablet, 1 on phones. CSS Grid (not Bootstrap col gutters) so
 * the percentage columns can never wrap when gaps are added. */

#kundangan-grid.row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
#kundangan-grid.row > [data-tmpl-col] {
  display: flex;
  margin-bottom: 0;
  /* Neutralize Bootstrap col gutters — the grid owns sizing now. */
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
}
#kundangan-grid.row > [data-tmpl-col] > .tmpl-card { width: 100%; }

/* Non-card sections nested inside the grid (gallery header, live count,
 * empty state) span the full row instead of occupying one grid cell. */
#kundangan-grid > .col-md-12,
#kundangan-grid > .tmpl-section-count,
#kundangan-grid > .tmpl-search-empty {
  grid-column: 1 / -1;
}
#kundangan-grid > .col-md-12 { margin-bottom: 0; }

@media (max-width: 767.98px) {
  #kundangan-grid.row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
}
@media (max-width: 479.98px) {
  #kundangan-grid.row { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}

/* On narrow phones the two card actions read better stacked. */
@media (max-width: 575.98px) {
  #kundangan-grid .tmpl-card__actions { flex-direction: column; }
}

/* The shared page shell wraps content in a Bootstrap .row; zero its
 * negative gutters so the gallery never pushes 15px past the viewport. */
.kdg-main > .row { margin-left: 0; margin-right: 0; }

/* Hide the leading count line until the user searches (JS fills it). */
#kundangan-count:empty { display: none; }