/*!
 * File: geovanne-navalta-modern-listings-kvcore.css
 * Patch: GN MF Property Types Options Panel + Row Balance (2-col fill)
 * Version: v1.2.0
 * Updated: 2026-01-11
 *
 * Scope: Only within #gn-mf-kvcore-search-shell to avoid affecting other forms/pages.
 */

#gn-mf-kvcore-search-shell {
  --gn-kv-glass-bg: rgba(255, 255, 255, 0.92);
  --gn-kv-glass-bg-2: rgba(248, 250, 252, 0.86);
  --gn-kv-glass-border: rgba(15, 23, 42, 0.10);
  --gn-kv-glass-border-strong: rgba(15, 23, 42, 0.16);
  --gn-kv-text: rgb(15, 23, 42);

  --gn-kv-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
  --gn-kv-shadow-soft: 0 10px 22px rgba(15, 23, 42, 0.12);

  --gn-kv-radius: 16px;
  --gn-kv-radius-sm: 14px;

  --gn-kv-gap: 0.65rem;
  --gn-kv-gap-sm: 0.5rem;

  --gn-kv-pill-minh: 44px;
  --gn-kv-pill-pad-y: 0.55rem;
  --gn-kv-pill-pad-x: 0.70rem;

  --gn-kv-accent: rgba(56, 189, 248, 0.34);
  --gn-kv-accent-strong: rgba(56, 189, 248, 0.52);
  --gn-kv-accent-bg: rgba(56, 189, 248, 0.16);
}

/* -------------------------------------------------- */
/* PROPERTY TYPES OPTIONS PANEL: width + glass panel */
/* -------------------------------------------------- */

#gn-mf-kvcore-search-shell #kv-filters-property-types-options-list.kv-filters-options-panel {
  /* mas maluwag at mas modern */
  background: var(--gn-kv-glass-bg) !important;
  border: 1px solid var(--gn-kv-glass-border) !important;
  border-radius: calc(var(--gn-kv-radius) + 2px) !important;
  box-shadow: var(--gn-kv-shadow) !important;

  /* iwas cramped: gawing mas “form-width” ang dating */
  width: clamp(280px, 46vw, 720px) !important;
  max-width: calc(100vw - 1.25rem) !important;
  margin: 0.45rem auto !important;

  /* safety kung may parent na may overflow */
  overflow: visible !important;

  /* padding spacing */
  padding: 0.75rem !important;

  color: var(--gn-kv-text) !important;
  text-align: left !important;
}

/* Kung nasa “more filters” wrapper, siguraduhing di nagiging masikip */
#gn-mf-kvcore-search-shell #kv-filters-container-more .filters-container-more-wrapper .kv-row-proptypes #kv-filters-property-types-options-list.kv-filters-options-panel {
  max-width: 100% !important;
}

/* -------------------------------------------------- */
/* PROPERTY TYPES ROW: fill the empty right side (balanced) */
/* -------------------------------------------------- */

/* 1) kung grid na ang types-row, i-dense flow para mapuno ang gaps */
#gn-mf-kvcore-search-shell #kv-filters-container-more .kv-row-proptypes .types-row.kv-types-row {
  grid-auto-flow: row dense !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

/* 2) alisin ang extra margins sa tiles; ang grid gap na ang bahala */
#gn-mf-kvcore-search-shell #kv-filters-container-more .kv-row-proptypes .types-row.kv-types-row > .kv-imagecheck-group {
  margin: 0 !important;
}

/* 3) IMPORTANT: gawing full-row (span 2 columns) ang “Other options” panel
      para hindi nakasiksik sa left column at para magamit ang right side space */
#gn-mf-kvcore-search-shell #kv-filters-container-more .kv-row-proptypes .types-row.kv-types-row #kv-filters-property-types-options-list.kv-filters-options-panel {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;

  width: 100% !important;
  max-width: 100% !important;

  /* align sa grid edges (hindi centered na may auto margins) */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* -------------------------------------------------- */
/* UL: Gawing grid para pantay at di nagsisiksikan */
/* -------------------------------------------------- */

#gn-mf-kvcore-search-shell #kv-filters-property-types-options-list > ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
  gap: var(--gn-kv-gap) !important;
  align-items: stretch !important;
}

/* -------------------------------------------------- */
/* LI: alisin ang fixed/flex-basis na nagpapasikip */
/* -------------------------------------------------- */

#gn-mf-kvcore-search-shell
  .kv-properties-search-form
  .kv-filters-control-container
  #kv-filters-container-more
  .kv-row-proptypes
  .kv-filters-options-panel
  ul
  li {
  /* override sa kvcoreidx.css */
  display: block !important;
  flex: 0 0 auto !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  position: relative !important;
  min-height: var(--gn-kv-pill-minh) !important;
}

/* -------------------------------------------------- */
/* INPUT: gawing full-area clickable overlay (safe kahit di tama ang label-for/id) */
/* -------------------------------------------------- */

#gn-mf-kvcore-search-shell #kv-filters-property-types-options-list ul li input[type="checkbox"].kv-imagecheck {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  opacity: 0 !important;
  margin: 0 !important;

  /* neutralize mga generic input styles */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;

  cursor: pointer !important;
  z-index: 2 !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* -------------------------------------------------- */
/* LABEL: pill/card look, centered, responsive typography */
/* -------------------------------------------------- */

#gn-mf-kvcore-search-shell #kv-filters-property-types-options-list ul li label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: var(--gn-kv-pill-minh) !important;

  padding: var(--gn-kv-pill-pad-y) var(--gn-kv-pill-pad-x) !important;

  border-radius: var(--gn-kv-radius-sm) !important;
  border: 1px solid var(--gn-kv-glass-border) !important;

  background: var(--gn-kv-glass-bg-2) !important;
  box-shadow: var(--gn-kv-shadow-soft) !important;

  color: var(--gn-kv-text) !important;
  text-align: center !important;

  font-weight: 600 !important;
  font-size: clamp(0.86rem, 0.85rem + 0.15vw, 0.98rem) !important;
  line-height: 1.15 !important;

  /* iwas “patayo” ang wrap */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;

  user-select: none !important;

  transition: transform 140ms ease, box-shadow 180ms ease, border-color 160ms ease, background-color 160ms ease !important;
  z-index: 1 !important;
}

/* hover */
#gn-mf-kvcore-search-shell #kv-filters-property-types-options-list ul li:hover label {
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18) !important;
  border-color: var(--gn-kv-glass-border-strong) !important;
}

/* checked state (input + label pattern) */
#gn-mf-kvcore-search-shell #kv-filters-property-types-options-list ul li input[type="checkbox"]:checked + label {
  background: var(--gn-kv-accent-bg) !important;
  border-color: var(--gn-kv-accent-strong) !important;
  box-shadow: 0 18px 40px rgba(56, 189, 248, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* focus-visible a11y */
#gn-mf-kvcore-search-shell #kv-filters-property-types-options-list ul li input[type="checkbox"]:focus-visible + label {
  outline: 3px solid rgba(56, 189, 248, 0.55) !important;
  outline-offset: 3px !important;
}

/* -------------------------------------------------- */
/* Breakpoints: mas dikit pero hindi siksikan */
/* -------------------------------------------------- */

@media (max-width: 1024px) {
  #gn-mf-kvcore-search-shell #kv-filters-property-types-options-list.kv-filters-options-panel {
    width: clamp(280px, 70vw, 680px) !important;
    padding: 0.65rem !important;
  }

  #gn-mf-kvcore-search-shell #kv-filters-property-types-options-list > ul {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    gap: var(--gn-kv-gap-sm) !important;
  }

  #gn-mf-kvcore-search-shell #kv-filters-property-types-options-list ul li label {
    padding: 0.52rem 0.66rem !important;
  }
}

@media (max-width: 768px) {
  #gn-mf-kvcore-search-shell #kv-filters-property-types-options-list.kv-filters-options-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.35rem 0 !important;
    padding: 0.60rem !important;
  }

  /* 2 columns sa mobile para hindi sobrang haba */
  #gn-mf-kvcore-search-shell #kv-filters-property-types-options-list > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  #gn-mf-kvcore-search-shell #kv-filters-property-types-options-list ul li label {
    font-size: 0.92rem !important;
    padding: 0.52rem 0.62rem !important;
  }
}

@media (max-width: 420px) {
  /* kung sobrang sikip na device, 1 column para hindi nagsisiksikan */
  #gn-mf-kvcore-search-shell #kv-filters-property-types-options-list > ul {
    grid-template-columns: 1fr !important;
  }
}

/* -------------------------------------------------- */
/* Reduced motion: alisin ang transitions/animations */
/* -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #gn-mf-kvcore-search-shell #kv-filters-property-types-options-list ul li label {
    transition: none !important;
  }

  #gn-mf-kvcore-search-shell #kv-filters-property-types-options-list ul li:hover label {
    transform: none !important;
  }

  #gn-mf-kvcore-search-shell #kv-filters-property-types-options-list ul li input[type="checkbox"]:checked + label {
    transform: none !important;
  }
}