/* ============================================================
   CheckersBnB Homes Filter — public styles  v1.1
   All brand colours, columns, aspect ratio, and typography
   are injected as CSS custom properties on .chf-wrap via
   wp_add_inline_style() — they override the defaults below.
   ============================================================ */

/* ---- Hard defaults (in case the inline vars haven't loaded yet) ---- */
.chf-wrap {
  --chf-black:         #14110F;
  --chf-red:           #C41E1E;
  --chf-cream:         #FBF9F4;
  --chf-muted:         #6F6A63;
  --chf-line:          rgba(20,17,15,0.12);
  --chf-cols-d:        3;
  --chf-cols-t:        2;
  --chf-cols-m:        1;
  --chf-aspect:        4 / 3;

  --chf-font-eyebrow:  inherit;
  --chf-size-eyebrow:  11px;
  --chf-font-title:    Georgia, 'Times New Roman', serif;
  --chf-size-title:    22px;
  --chf-font-tagline:  inherit;
  --chf-size-tagline:  15px;
  --chf-font-price:    Georgia, 'Times New Roman', serif;
  --chf-size-price:    20px;
  --chf-font-cta:      inherit;
  --chf-size-cta:      12px;
  --chf-font-label:    inherit;
  --chf-size-label:    11px;

  position: relative;
}

/* ============================================================
   FILTER BAR — bordered card (image 4 design reference)
   Single rectangle, internal vertical dividers, soft shadow.
   ============================================================ */
.chf-bar {
  display: flex;
  flex-wrap: nowrap;       /* single row on desktop */
  align-items: stretch;    /* all groups same height */
  border: 1px solid var(--chf-line);
  box-shadow: 0 2px 12px rgba(20,17,15,0.06);
  background: #fff;
  margin-bottom: 36px;
  overflow: visible;
}

/* Each group is one column in the bar */
.chf-group {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 20px;
  border-right: 1px solid var(--chf-line);
  position: relative;
}
.chf-group:last-child {
  border-right: none;
}

/* Label (uppercase small — matches image 4 exactly) */
.chf-group__label {
  display: block;
  font-family: var(--chf-font-label);
  font-size: var(--chf-size-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--chf-muted);
  margin-bottom: 6px;
  white-space: nowrap;
}

/* ---- Dates group ---- */
.chf-group--dates {
  flex: 1.3 1 0;
}
.chf-dates-inner {
  display: flex;
  gap: 16px;
}
.chf-date-field {
  flex: 1 1 0;
  min-width: 0;
}
.chf-date-field .chf-group__label {
  margin-bottom: 4px;
}
.chf-date-input {
  width:            100%;
  border:            none;
  background:        transparent;
  padding:           4px 0;
  font-size:         14px;
  font-weight:       500;
  color:             var(--chf-black);
  font-family:       inherit;
  cursor:            pointer;
  outline:           none;
  border-bottom:     1px solid transparent;
  transition:        border-color .15s;
  color-scheme:      light;
}
.chf-date-input:focus { border-bottom-color: var(--chf-black); }
.chf-date-input:invalid { color: var(--chf-muted); }
/* Empty date input shows placeholder-like muted colour (native inputs can't use ::placeholder for date type reliably) */
.chf-date-input:not([value]),
.chf-date-input[value=""] {
  color: var(--chf-muted);
}

/* ---- Pills (City row — inside the bar) ---- */
.chf-group--pills .chf-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
.chf-pill {
  padding: 5px 12px;
  border: 1px solid var(--chf-line);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--chf-black);
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chf-pill:hover   { border-color: var(--chf-black); }
.chf-pill.is-active {
  background:    var(--chf-black);
  border-color:  var(--chf-black);
  color: #fff;
}

/* ---- Selects (Guests, Bedrooms, Sort) ---- */
.chf-select {
  appearance:          none;
  -webkit-appearance:  none;
  width:               100%;
  padding:             4px 28px 4px 0;
  border:              none;
  border-bottom:       1px solid transparent;
  background-color:    transparent;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236F6A63'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 4px center;
  cursor:              pointer;
  font-size:           14px;
  font-weight:         500;
  color:               var(--chf-black);
  outline:             none;
  transition:          border-color .15s;
}
.chf-select:focus {
  border-bottom-color: var(--chf-black);
}

/* ---- Price group ---- */
.chf-group--price {
  flex: 1.4 1 0;   /* slightly wider for slider */
}
.chf-price-readout {
  font-size:     14px;
  font-weight:   500;
  color:         var(--chf-black);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.chf-currency { font-size: 12px; }

.chf-slider { padding: 2px 0; }
.chf-slider__track {
  position:   relative;
  height:     2px;
  background: var(--chf-line);
  margin:     0 8px;
}
.chf-slider__fill {
  position:   absolute;
  top:        0;
  height:     100%;
  background: var(--chf-black);
}
.chf-slider__handle {
  position:      absolute;
  top:           50%;
  transform:     translate(-50%, -50%);
  width:         14px;
  height:        14px;
  border-radius: 50%;
  padding:       0;
  background:    #fff;
  border:        2px solid var(--chf-black);
  cursor:        grab;
  transition:    border-color .15s;
}
.chf-slider__handle:hover  { border-color: var(--chf-red); }
.chf-slider__handle:active { cursor: grabbing; }

/* ---- Reset group ---- */
.chf-group--reset {
  flex: 0 0 auto;
  border-right: none;
}
.chf-reset {
  padding:        6px 14px;
  border:         1px solid var(--chf-line);
  background:     transparent;
  cursor:         pointer;
  font-size:      11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color:          var(--chf-muted);
  white-space:    nowrap;
  transition:     color .15s, border-color .15s;
}
.chf-reset:hover { color: var(--chf-red); border-color: var(--chf-red); }

/* ============================================================
   RESULTS COUNT
   ============================================================ */
.chf-count {
  font-size:      12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color:          var(--chf-muted);
  margin:         0 0 28px;
}

/* ============================================================
   LOADING STATE
   ============================================================ */
.chf-loading {
  display:    none;
  position:   absolute;
  inset:      0;
  z-index:    5;
  background: rgba(251,249,244,.65);
  align-items: center;
  justify-content: center;
}
.chf-wrap.is-loading .chf-loading { display: flex; }
.chf-wrap.is-loading .chf-grid   { opacity: .4; pointer-events: none; transition: opacity .2s; }
.chf-spinner {
  width:         26px;
  height:        26px;
  border-radius: 50%;
  border:        2px solid var(--chf-line);
  border-top-color: var(--chf-black);
  animation:     chf-spin .7s linear infinite;
}
@keyframes chf-spin { to { transform: rotate(360deg); } }

/* ============================================================
   GRID
   ============================================================ */
.chf-grid {
  display:               grid;
  grid-template-columns: repeat(var(--chf-cols-d, 3), 1fr);
  gap:                   40px 32px;
  transition:            opacity .2s ease;
}
@media (max-width: 960px) {
  .chf-grid { grid-template-columns: repeat(var(--chf-cols-t, 2), 1fr); }
}
@media (max-width: 600px) {
  .chf-grid { grid-template-columns: repeat(var(--chf-cols-m, 1), 1fr); }
}

.chf-empty {
  grid-column: 1 / -1;
  padding:     52px 0;
  text-align:  center;
  font-size:   15px;
  color:       var(--chf-muted);
}
.chf-empty a { color: var(--chf-red); text-decoration: none; }

/* ============================================================
   CARD  (open / borderless — target: image 1)
   ============================================================ */
.chf-card { display: flex; flex-direction: column; }

/* Image */
.chf-card__media {
  display:      block;
  overflow:     hidden;
  margin-bottom: 18px;
  aspect-ratio: var(--chf-aspect, 4 / 3);
}
.chf-card__img {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  display:      block;
  transition:   transform .45s ease;
}
.chf-card__media--zoom:hover .chf-card__img { transform: scale(1.04); }

/* Body */
.chf-card__body { flex: 1; display: flex; flex-direction: column; }

/* City eyebrow */
.chf-card__eyebrow {
  display:        block;
  font-family:    var(--chf-font-eyebrow);
  font-size:      var(--chf-size-eyebrow);
  letter-spacing: .14em;
  font-weight:    600;
  color:          var(--chf-red);
  margin-bottom:  6px;
  text-transform: uppercase;
}

/* Title */
.chf-card__title {
  font-family: var(--chf-font-title);
  font-size:   var(--chf-size-title);
  font-weight: 400;
  line-height: 1.2;
  color:       var(--chf-black);
  margin:      0 0 8px;
}
.chf-card__title a {
  color:           inherit;
  text-decoration: none;
  transition:      color .15s;
}
.chf-card__title a:hover { color: var(--chf-red); }

/* Tagline */
.chf-card__tagline {
  font-family: var(--chf-font-tagline);
  font-size:   var(--chf-size-tagline);
  font-style:  italic;
  line-height: 1.6;
  color:       var(--chf-muted);
  margin:      0 0 18px;
}

/* Footer — price left, CTA right (matches image 1) */
.chf-card__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-top:      auto;
  padding-top:     14px;
  border-top:      1px solid var(--chf-line);
}

/* Price  — "from ₦1,000" style matching image 1 */
.chf-card__price-wrap {
  display:     flex;
  flex-direction: column;
  gap:         0;
}
.chf-card__price-from {
  font-size:   11px;
  color:       var(--chf-muted);
  text-transform: lowercase;
  letter-spacing: .04em;
}
.chf-card__price {
  font-family: var(--chf-font-price);
  font-size:   var(--chf-size-price);
  font-weight: 600;
  color:       var(--chf-black);
  line-height: 1.1;
}
.chf-card__period {
  font-family: inherit;
  font-size:   12px;
  font-weight: 400;
  color:       var(--chf-muted);
  margin-left: 2px;
}

/* CTA */
.chf-card__cta {
  font-family:    var(--chf-font-cta);
  font-size:      var(--chf-size-cta);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight:    600;
  color:          var(--chf-black);
  text-decoration: none;
  white-space:    nowrap;
  transition:     color .15s;
}
.chf-card__cta:hover { color: var(--chf-red); }

/* ============================================================
   RESPONSIVE — filter bar collapses to 2-col grid on mobile
   ============================================================ */
@media (max-width: 900px) {
  /* Wrap the bar into a 2-col grid */
  .chf-bar {
    flex-wrap:     wrap;
    border-radius: 0;
  }
  .chf-group {
    flex:          0 0 calc(50% - 1px); /* 2 columns, border between */
    border-right:  1px solid var(--chf-line);
    border-bottom: 1px solid var(--chf-line);
  }
  /* Even items (right column) — no right border */
  .chf-group:nth-child(even) {
    border-right: none;
  }
  /* Last row — no bottom border on the last two */
  .chf-group:nth-last-child(-n+2) {
    border-bottom: none;
  }
  /* Dates, Price and Reset are full-width in the 2-col layout */
  .chf-group--dates,
  .chf-group--price,
  .chf-group--reset {
    flex:         0 0 100%;
    border-right: none;
  }
  /* Select fills full cell width */
  .chf-select { width: 100%; }
}

@media (max-width: 480px) {
  /* Stack all to single column on very small screens */
  .chf-group {
    flex:         0 0 100%;
    border-right: none;
  }
  .chf-group:nth-child(even) {
    border-right: none;
  }
}