/* ============================================================
   Unit Untuk Disewa — filter bar: obvious "Tapis unit" label + styled dropdowns
   NOTE: Loaded after tm-sewa.css (overrides the first, plainer filter styles).
   ============================================================ */
.sw-filter { margin-top: 38px; position: relative; overflow: visible; }

.sw-filter__title {
  position: absolute; left: 30px; top: -17px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 16px;
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--ink);
  border-radius: 999px; box-shadow: 0 10px 22px -10px rgba(11, 33, 64, .7);
}
.sw-filter__title > i { color: var(--gold); }
.sw-filter__title:not(:has(.sw-filter__clear:not([hidden]))) { padding-right: 16px; }
.sw-filter__clear { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 4px 12px; font: 700 .68rem "Plus Jakarta Sans", sans-serif; letter-spacing: .06em; text-transform: none; color: var(--ink); background: var(--gold); border: 0; border-radius: 999px; cursor: pointer; transition: transform .25s var(--ease), background .25s; }
.sw-filter__clear[hidden] { display: none; }
.sw-filter__clear:hover { transform: scale(1.06); background: #fff; }
.sw-filter__clear i { font-size: .6rem; }

/* each field reads as a dropdown: icon chip + label + value + chevron */
.sw-filter__f { position: relative; cursor: default; padding: 6px 18px 6px 14px; border-right: 0; border-radius: 22px; transition: background .25s; }
.sw-filter__f + .sw-filter__f::before { content: ""; position: absolute; left: -1px; top: 20%; bottom: 20%; width: 1px; background: var(--line); }
.sw-filter__f:hover, .sw-filter__f.is-open { background: var(--ivory); }
.sw-filter__f > i { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; font-size: 1.1rem; color: var(--ink); border-radius: 14px; background: rgba(255, 199, 54, .3); transition: background .25s; }
.sw-filter__f.is-open > i, .sw-filter__f.is-set > i { background: var(--gold); }
.sw-filter__f > span { position: relative; flex: 1; min-width: 0; }
.sw-filter__f small { margin-bottom: 1px; }

.sw-dd__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sw-dd__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0; font: 700 1rem "Plus Jakarta Sans", sans-serif; color: var(--ink); text-align: left; background: none; border: 0; cursor: pointer; }
.sw-dd__btn b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-dd__btn > i { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; font-size: .7rem; border-radius: 50%; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), background .25s, color .25s; }
.sw-filter__f:hover .sw-dd__btn > i { background: var(--ink); color: var(--gold); }
.sw-filter__f.is-open .sw-dd__btn > i { transform: rotate(180deg); background: var(--ink); color: var(--gold); }
.sw-filter__f.is-set .sw-dd__btn b { color: #8a6200; }
.sw-dd__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 10px; }

/* the dropdown panel */
.sw-dd__list {
  position: absolute; z-index: 20; left: -62px; top: calc(100% + 22px); min-width: 280px; margin: 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(11, 33, 64, .5);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top left;
  transition: opacity .2s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
.sw-dd__list::before { content: ""; position: absolute; top: -7px; left: 74px; width: 14px; height: 14px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.sw-filter__f.is-open .sw-dd__list { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .3s var(--ease); }
.sw-dd__list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; font-size: .95rem; font-weight: 600; color: var(--ink); border-radius: 14px; cursor: pointer; transition: background .15s, padding-left .2s var(--ease); }
.sw-dd__list li i { color: transparent; font-size: 1.1rem; }
.sw-dd__list li:hover, .sw-dd__list li.is-cursor { background: var(--ivory); padding-left: 18px; }
.sw-dd__list li.is-selected { background: rgba(255, 199, 54, .22); font-weight: 800; }
.sw-dd__list li.is-selected i { color: #b5830a; }
.sw-dd__list li:first-child:not(.is-selected) { color: var(--muted); }

@media (max-width: 991px) {
  .sw-filter { margin-top: 46px; }
  .sw-filter__title { left: 22px; }
  .sw-filter__f + .sw-filter__f::before { display: none; }
  .sw-dd__list { left: 0; min-width: 100%; }
  .sw-dd__list::before { left: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-dd__list, .sw-dd__btn > i, .sw-filter__f { transition: none; }
}

/* give the "Tapis unit" tab its own space above the fields */
.sw-filter { padding-top: 24px; margin-top: 44px; }
@media (max-width: 991px) { .sw-filter { margin-top: 52px; } }

/* empty state: the invisible details block must not sit on top of (and swallow clicks for) "Lihat unit" */
.sw-chosen__info { pointer-events: none; visibility: hidden; transition: opacity .5s ease .1s, transform .6s var(--ease) .1s, visibility 0s linear .6s; }
.sw-chosen[data-state="filled"] .sw-chosen__info { pointer-events: auto; visibility: visible; transition: opacity .5s ease .1s, transform .6s var(--ease) .1s; }
.sw-chosen__empty { z-index: 2; }
.sw-chosen[data-state="filled"] .sw-chosen__empty { z-index: 0; }