/* ==================================================================
   Component CSS: drawer_looking_for_rent (Bootstrap Offcanvas)
   ------------------------------------------------------------------
   Bootstrap's .offcanvas class already handles the slide-in panel,
   backdrop overlay, animation, and open/close behaviour — no custom
   JS needed. This file only adds small cosmetic tweaks so the
   offcanvas matches this project's look (width, header padding).
   ================================================================== */

.rf-offcanvas{
  width:420px;
  max-width:92vw;
}

.rf-drawer-header{
  align-items:flex-start;
  padding:20px;
  border-bottom:1px solid var(--border);
}
.rf-drawer-header h4{
  font-size:18px;
  font-weight:800;
  margin:4px 0 6px;
}
.rf-drawer-header p{
  font-size:10px;
  color:var(--muted);
  margin:0;
}

/* ---- Tags checklist (fixes conflict with .form-grid label styling) ----
   .form-grid label{display:block;font-size:8px;text-transform:uppercase;
   font-weight:800} applies to EVERY <label> inside .form-grid, including
   these checkbox labels — which broke their size/alignment. This block
   overrides it back to normal readable checkbox-row styling, using a
   more specific selector so it wins regardless of CSS file order. */
.form-grid .rf-tag-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 16px;
}
.form-grid .rf-tag-grid label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:500;
  text-transform:none;
  letter-spacing:normal;
  color:var(--text);
  margin-bottom:0;
  cursor:pointer;
}
.form-grid .rf-tag-grid input[type="checkbox"]{
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin:0;
  accent-color:var(--p);
  cursor:pointer;
}
@media (max-width:420px){
  .form-grid .rf-tag-grid{ grid-template-columns:1fr; }
}