/* Container */
.rpl-sbar-wrap {
  width: 100%;
}
.rpl-sbar {
  display: flex;
  align-items: center;
  gap: 16px; /* bisa diubah via control "gap" */
}

/* Switcher */
.rpl-sbar__switch {
  display: inline-flex;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 10px;
}
.rpl-sbar__switch button {
  border: 0;
  background: transparent;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.rpl-sbar__switch button.is-active {
  background: var(--rpl-sbar-switch-active, #fff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset;
}

/* Input */
.rpl-sbar__input {
  position: relative;
  display: flex;
  align-items: center;
  background: #f7f7f7;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  min-width: 280px;
  flex: 1 1 auto;
}
.rpl-sbar__input input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 14px 12px 40px;
  outline: none;
  font-size: 14px;
}
.rpl-sbar__icon {
  position: absolute;
  left: 12px;
  pointer-events: none;
  opacity: 0.7;
}

/* Buttons */
.rpl-sbar__filter,
.rpl-sbar__submit {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 18px;
  background: #f7f7f7;
  cursor: pointer;
}
.rpl-sbar__submit {
  background: #113546;
  color: #fff;
  border-color: #113546;
}

/* Modal placeholder */
.rpl-sbar__modal[hidden] {
  display: none !important;
}
.rpl-sbar__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
}
.rpl-sbar__modal-inner {
  background: #fff;
  width: min(680px, 92vw);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.rpl-sbar__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.rpl-sbar__modal-foot {
  margin-top: 16px;
  text-align: right;
}
.rpl-sbar__modal-apply,
.rpl-sbar__modal-close {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f7f7f7;
  cursor: pointer;
}
.rpl-sbar__preview {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.8;
}

/* ====== EXISTING: bar (keep yours) ====== */
.rpl-sbar-wrap {
  width: 100%;
}
.rpl-sbar {
  display: flex;
  gap: 16px;
  align-items: center;
}
.rpl-sbar__switch {
  display: inline-flex;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 4px;
}
.rpl-sbar__switch button {
  border: 0;
  background: transparent;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
}
.rpl-sbar__switch button.is-active {
  background: #fff;
  box-shadow: 0 0 0 1px #e5e7eb inset;
}
.rpl-sbar__input {
  flex: 1;
  position: relative;
}
.rpl-sbar__chips{
  display:flex;
  flex-wrap:nowrap; /* keep in one line */
  white-space:nowrap; /* no line breaks */
  align-items:center;
  gap:4px;
  padding:4px 28px 4px 28px; /* compact vertical space and icon spacing */
  max-width:calc(100% - 160px); /* leave room for input (min 160px) */
  overflow-x:auto; /* allow horizontal scroll if overflow */
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  min-width:0; /* allow flex item to shrink and scroll instead of clipping */
  flex:0 1 auto; /* grow by content until max-width */
}
.rpl-sbar__chips:empty{ display:none; padding:0; margin:0; max-width:0; }
.rpl-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap; /* chip content one line */
  background:#eef2f7;
  color:#111827;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  flex:0 0 auto; /* fit-content sizing */
  border:1px solid #e5e7eb;
}
.rpl-chip__x{
  border:0;
  background:transparent;
  color:#6b7280;
  font-size:12px;
  line-height:1;
  padding:0 4px; /* tighter close icon padding */
  margin-left:2px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.rpl-sbar__suburb-input{
  width:100%;
  flex:1 1 160px; /* take remaining space, min 160px */
  min-width:160px; /* avoid collapsing too small */
  padding:8px 12px 10px 30px; /* reduced left padding */
  border:0;
  outline:none;
  background:transparent;
  font-size:14px;
}
.rpl-sbar__ac{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  margin-top:6px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  max-height:300px;
  overflow:auto;
  z-index:50;
}
.rpl-ac__item{
  padding:10px 12px;
  font-size:14px;
  color:#111827;
  cursor:pointer;
}
.rpl-ac__item:hover{
  background:#f9fafb;
}
.rpl-sbar__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.rpl-sbar__input input[type='search'] {
  width: 100%;
  padding: 12px 14px 12px 36px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f7f7f7;
}
.rpl-sbar__filter,
.rpl-sbar__submit {
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  cursor: pointer;
}
.rpl-sbar__filter {
  background: #f7f7f7;
  border: 1px solid #e5e7eb;
}
.rpl-sbar__submit {
  background: #143746;
  color: #fff;
}

/* ====== NEW: Modal Filter ====== */
.rpl-filter[hidden] {
  display: none !important;
}
.rpl-filter {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.rpl-filter__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.rpl-filter__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(840px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  background: #fff;
  border-radius: 16px;
  overflow: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.rpl-filter__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px 24px;
  border-bottom: none;
}
.rpl-filter__title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  letter-spacing: 0.5px;
}
.rpl-filter__close {
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
  color: #6b7280;
  font-weight: 300;
}

.rpl-filter__switch-container {
  padding: 0 24px 16px 24px;
}

/* Full width switcher */
.rpl-sbar__switch--fullwidth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 4px;
  width: 100%;
}

.rpl-sbar__switch--fullwidth button {
  flex: 1;
  text-align: center;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 500;
}

.rpl-filter__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px 20px 24px;
  position: relative;
}
.rpl-filter__search-icon {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #6b7280;
  z-index: 1;
}
.rpl-filter__search-input {
  width: 100%;
  padding: 12px 14px 12px 44px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f7f7f7;
  font-size: 14px;
}

/* Recent Search Section */
.rpl-filter__recent {
  padding: 0 24px 20px 24px;
}
.rpl-filter__section-title {
  font-size: 12px;
  font-weight: 600;
  color: #10b981;
  margin: 0 0 12px 0;
  letter-spacing: 0.5px;
}
.rpl-filter__recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rpl-filter__recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.rpl-filter__recent-item:hover {
  background-color: #f9fafb;
}
.rpl-filter__location-icon {
  font-size: 14px;
}
.rpl-filter__recent-content {
  flex: 1;
}
.rpl-filter__recent-location {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 4px;
}
.rpl-filter__recent-tag {
  font-size: 12px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* Suggested Location Section */
.rpl-filter__suggested {
  padding: 0 24px 20px 24px;
}
.rpl-filter__suggested-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s;
  font-size: 14px;
  color: #111827;
}
.rpl-filter__suggested-item:hover {
  background-color: #f9fafb;
}

.rpl-filter__section {
  padding: 20px 24px;
  border-top: 1px solid #f2f3f6;
}
.rpl-filter__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rpl-filter__label {
  font-weight: 600;
  color: #6b7280;
}
.rpl-filter__set {
  border: 0;
  background: transparent;
  color: #0b7285;
  font-weight: 600;
  cursor: pointer;
}
.rpl-filter__content {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #0b72851a;
  border-radius: 12px;
}
.rpl-filter__content.is-open {
  display: block;
}

.rpl-filter__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .rpl-filter__grid {
    grid-template-columns: 1fr;
  }
}

.rpl-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.rpl-chk input {
  width: 16px;
  height: 16px;
}

.rpl-filter__range {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rpl-filter__range input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.rpl-filter__dash {
  opacity: 0.6;
}

/* Occupancy Section */
.rpl-filter__occupancy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

/* Inline occupancy section */
.rpl-filter__section--inline {
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.rpl-filter__occupancy-inline {
  display: flex;
  gap: 24px;
  align-items: center;
}

.rpl-filter__occupancy-inline .rpl-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.rpl-filter__occupancy-inline .rpl-chk input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.rpl-filter__foot {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eef1f4;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
}
.rpl-filter__clear {
  border: 0;
  background: transparent;
  color: #111827;
  opacity: 0.7;
  cursor: pointer;
}
.rpl-filter__submit {
  border: 0;
  background: #143746;
  color: #fff;
  border-radius: 12px;
  padding: 12px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Jangan render ikon bar di dalam popup */
.rpl-fp .rpl-sbar__icon {
  display: none !important;
}

/* Additional styling untuk mockup compliance */
.rpl-filter__panel {
  max-height: 90vh;
  overflow-y: auto;
}

.rpl-filter__foot {
  padding: 16px 24px;
  gap: 16px;
}

.rpl-filter__clear {
  font-size: 14px;
  font-weight: 500;
}

.rpl-filter__submit {
  font-size: 14px;
  font-weight: 600;
  min-width: 120px;
  justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .rpl-filter__panel {
    width: calc(100% - 16px);
    margin: 8px;
  }
  
  .rpl-filter__head,
  .rpl-filter__switch-container,
  .rpl-filter__search,
  .rpl-filter__recent,
  .rpl-filter__suggested,
  .rpl-filter__section,
  .rpl-filter__section--inline {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .rpl-filter__occupancy-inline {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .rpl-filter__foot {
    padding: 16px;
  }
}