/* ZMT Advanced Filter Grid
   File: assets/css/new-widget.css
   Notes: Keep it lightweight, accessible, and theme-friendly. */

.zmt-afg {
  --zmt-afg-gap: 20px;
  --zmt-afg-radius: 12px;
  --zmt-afg-chip-gap: 8px;
  --zmt-afg-chip-pad: 8px 12px;
  --zmt-afg-chip-bg: #f3f4f6;
  --zmt-afg-chip-bg-active: #111827;
  --zmt-afg-chip-color: #111827;
  --zmt-afg-chip-color-active: #ffffff;
  --zmt-afg-btn-bg: #111827;
  --zmt-afg-btn-color: #ffffff;
  --zmt-afg-btn-bg-ghost: transparent;
  --zmt-afg-btn-color-ghost: #111827;

  position: relative;
  display: block;
}

.zmt-afg__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zmt-afg-gap);
  margin-bottom: var(--zmt-afg-gap);
}

.zmt-afg__search input {
  width: min(320px, 100%);
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.zmt-afg__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zmt-afg-chip-gap);
}

.zmt-afg__chip {
  border: 0;
  border-radius: 999px;
  padding: var(--zmt-afg-chip-pad);
  background: var(--zmt-afg-chip-bg);
  color: var(--zmt-afg-chip-color);
  cursor: pointer;
}
.zmt-afg__chip.is-active,
.zmt-afg__chip:focus-visible {
  background: var(--zmt-afg-chip-bg-active);
  color: var(--zmt-afg-chip-color-active);
  outline: none;
}

.zmt-afg__select-wrap select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.zmt-afg__grid {
  --cols-desktop: 3;
  --cols-tablet: 2;
  --cols-mobile: 1;
  display: grid;
  gap: var(--zmt-afg-gap);
  grid-template-columns: repeat(var(--cols-desktop), minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .zmt-afg__grid { grid-template-columns: repeat(var(--cols-tablet), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .zmt-afg__grid { grid-template-columns: repeat(var(--cols-mobile), minmax(0, 1fr)); }
}

.zmt-afg__card {
  background: #fff;
  border-radius: var(--zmt-afg-radius);
  overflow: hidden;
  border: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.zmt-afg__thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.zmt-afg__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zmt-afg__title {
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.35;
}

.zmt-afg__meta { font-size: .85rem; color: #6b7280; }

.zmt-afg__price-rating {
  display: flex; align-items: center; gap: 10px;
}

.zmt-afg__excerpt { color: #4b5563; margin: 0; }

.zmt-afg__actions {
  margin-top: 8px;
  display: flex;
  gap: 10px;
}

.zmt-afg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--zmt-afg-btn-bg);
  color: var(--zmt-afg-btn-color);
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}
.zmt-afg__btn--ghost {
  background: var(--zmt-afg-btn-bg-ghost);
  color: var(--zmt-afg-btn-color-ghost);
  border-color: #e5e7eb;
}

.zmt-afg__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--zmt-afg-gap) + 4px);
}

.zmt-afg__load-more {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  display: none;
}
.zmt-afg--manual .zmt-afg__load-more { display: inline-flex; }

.zmt-afg__sentinel { width: 1px; height: 1px; }

.zmt-afg__skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #edeef0 37%, #f3f4f6 63%);
  background-size: 400% 100%;
  animation: zmt-afg-shine 1.2s infinite;
  border-radius: 8px;
  height: 12px;
}
@keyframes zmt-afg-shine { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Modal */
.zmt-afg-modal[aria-hidden="true"] { display: none; }
.zmt-afg-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
}
.zmt-afg-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
}
.zmt-afg-modal__container {
  position: relative; width: min(860px, 92vw);
  max-height: 86vh; overflow: auto;
  background: #fff; border-radius: 12px; padding: 20px;
}
.zmt-afg-modal__close {
  position: absolute; top: 6px; right: 10px;
  background: transparent; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.zmt-afg-modal__thumb { width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; }
.zmt-afg-modal__title { margin: 0 0 8px 0; }
.zmt-afg-modal__content { color: #374151; }
.zmt-afg-modal__actions { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .zmt-afg__skeleton { animation: none; }
}

/* Basic dark mode support */
@media (prefers-color-scheme: dark) {
  .zmt-afg__card { background: #111827; border-color: #1f2937; }
  .zmt-afg__body, .zmt-afg__excerpt { color: #d1d5db; }
  .zmt-afg__meta { color: #9ca3af; }
  .zmt-afg__load-more { background: #111827; color: #e5e7eb; border-color: #1f2937; }
  .zmt-afg__chip { background: #1f2937; color: #d1d5db; }
  .zmt-afg__chip.is-active { background: #e5e7eb; color: #111827; }
}